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据 统计 ,2017 年 ,用 户 累计 下 载 应 用 程序 1780 亿 次 ,分 析 师 预测 到 2022 年 应 用 程序 的 
用 户 下 载 量 将 增长 到 2580 亿 次 。 随 着 移动 客户 对 应 用 程序 的 要 求 不 断 提 高 ,开发 人 员 的 需 
求 量 也 越 来 越 大 。Flutter 是 谷歌 创建 的 一 种 革命 性 的 跨 平台 软件 开发 框架 , 它 更 容易 为 
iOS 和 Android 系统 编写 安全 的 、 高 性 能 的 原生 应 用 程序 。Flutter 应 用 的 运行 速度 非常 快 ， 
因为 此 开源 解决 方案 无 须 JavaScript 桥接 即 可 将 Dart 代码 编译 为 平台 特定 的 程序 ,并 且 
Flutter 还 支持 热 加 载 。Flutter 的 应 用 不 仅 响应 迅速 ,而且 效果 惊人 ! 

本 书 手把手 教 读者 如 何 使 用 Flutter 构建 功能 强大 的 全 功能 移动 应 用 程序 。 本 书 分 为 
基础 篇 和 高 级 篇 。 基 础 篇 (第 1 一 9 章 ) 从 最 基础 开始 讲解 Flutter 和 Dart, 以 及 如 何 使 用 
Flutter 提供 的 丰富 的 小 部 件 来 添加 常用 的 UI 元 素 ,如 按钮 .开关 表单、 工具 栏 和 列表 等 ; 
高 级 篇 (第 10 一 20 章 ) 通 过 引人入胜 的 示例 ,创建 一 个 基本 的 用 户 界面 ,构建 完整 的 状态 管 
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基 础 篇 


pp> 


相信 许多 移动 应 用 开发 者 在 开发 过 程 中 过 到 过 和 我 同样 问题 ,开发 一 套 原生 的 应 用 程 
序 ,需要 运行 在 iOS 和 Android 两 个 不 同 的 平台 ,为 此 我 们 至 少 要 学 习 Java、 Object-C、 
Swift 等 两 到 三 种 语言 来 满足 这 样 的 需求 ,占用 了 我 们 大 量 的 时 间 和 精力 ,而 且 还 要 维护 不 
同 的 代码 库 , 或 者 有 的 开发 者 使 用 Web 的 H5 来 实现 这 种 跨 平台 的 应 用 ,但 H5 通常 跟 设 备 
操作 系统 不 是 太 友好 ,往往 受 浏览 器 版 本 和 移动 设备 中 操作 系统 的 限制 。 再 有 就 是 采用 加 
壳 的 技术 来 满足 这 种 跨 平台 的 需求 ,但 是 就 性 能 来 说 会 很 糟糕 。 

基于 以 上 这 些 问题 的 存在 ,Flutter 诞生 了 ,成 为 移动 应 用 领域 里 很 热门 的 一 项 技术 。 
大 的 互联 网 平台 都 开始 关注 并 使 用 这 项 技术 去 开发 它们 的 移动 应 用 。 

大 家 将 从 本 书 基础 篇 学 习 到 如 何 使 用 一 种 语言 一 个 代码 库 构 建 跨 平台 移动 App, 内 
容 包括 如 何 构建 小 部 件 , 如 何 使 用 这 些小 部 件 搭建 你 的 应 用 。 大 家 将 循序 渐进 地 了 解 怎 么 
使 用 Flutter 构建 一 个 App。 

这 里 给 大 家 建议 是 结合 书 中 的 内 容 进 行 编码 实践 ,现在 我 们 就 一 起 学 习 Flutter, 相 信 
它 会 给 你 带 来 一 种 神奇 的 体验 。 为 了 提高 学 习 效 率 ,作者 提供 在 线 答疑 服务 ,网 址 http:// 
www. x7data. com, 邮 箱 r80hou@hotmail. com 或 加 QQ 群 : 169055795。 

基础 篇 包括 了 以 下 几 章 : 

第 1 章 Flutter 简介 

介绍 Flutter 的 一 些 发 展 情况 和 概括 性 地 总 结 Flutter 的 技术 架构 ,让 你 快速 地 了 解 
Flutter, 以 及 在 不 同 的 操作 系统 上 安装 Flutter 的 运行 环境 和 IDE。 

第 2 章 深入 理解 Flutter 基础 知识 和 小 部 件 概念 

深入 学 习 Flutter 和 Dart, 以 及 如 何 使 用 Flutter 构建 移动 App。 这 一 章 会 让 你 了 解 到 
关于 小 部 件 的 核心 基础 知识 ,使 用 学 到 的 小 部 件 构建 第 一 个 Flutter 项 目 。 

第 3 章 调试 Flutter 应 用 程序 

定位 Flutter 开发 过 程 中 不 同类 型 的 错误 ,学 习 不 同 的 解决 方式 。 


第 4 章 在 不 同 设备 上 运行 Flutter 应 用 程序 

将 App 运行 到 iOS 和 Android 模拟 器 及 真实 设备 上 。 

第 5 章 ”列表 ListView 小 部 件 和 条 件 过 滤 

深入 学 习 ListView 小 部 件 ,并 根据 条 件 泻 染 ListView 中 的 内 容 。 

第 6 章 Flutter 页 面 导航 

学 习 如 何 构建 页 面 导航 ,然后 通过 Flutter 进行 页 面 切换 ,以 及 如 何 向 前 .向 后 传递 
数据 。 

第 7 章 ”处理 用 户 输入 

学 习 使 用 基本 表单 小 部 件 与 用 户 交 互 并 保存 用 户 输入 的 内 容 。 

第 8 章 深入 学 习 Flutter 小 部 件 

了 解 查找 小 部 件 的 方式 及 配置 小 部 件 的 方法 。 

第 9 章 Form 表单 

学 习 以 更 好 的 方式 处 理 用 户 输入 ,验证 输入 内 容 并 保存 它们 。 

通过 本 篇 的 学 习 , 你 可 以 了 解 到 Flutter、Dart 及 小 部 件 的 概念 ; 学 会 在 macOS 和 
Windows 上 搭建 Flutter 的 环境 ; 掌握 调试 技巧 和 穿 门 ; 理解 基于 堆栈 的 导航 ; 处 理 并 验 
证 用 户 的 输入 ,从 而 搭建 出 具有 基本 功能 的 App。 


Flutter 简介 


Flutter 实际 上 是 一 个 包含 多 种 内 容 的 软件 包 , 你 可 以 说 它 是 用 于 创建 移动 2D 应 用 程 
序 的 SDK 软件 开发 工具 包 。Flutter 的 软件 包 中 最 重要 的 就 是 编程 框架 ,框架 使 用 Dart 作 
为 编程 语言 ,通过 本 章 的 学 习 你 将 对 Flutter 的 特性 和 开发 技术 有 深入 的 了 解 。 


1.1 什么 是 Flutter 


Flutter 是 一 个 基于 Dart 语言 的 框架 ,这 个 框架 包含 可 以 直接 使 用 的 
类 。 这 样 你 就 不 必 从 头 开始 编写 所 有 内 容 。 例 如 ,Flutter 附带 了 大 量 的 小 
部 件 ,小 部 件 实际 上 就 是 UI 元 素 , 例 如 按钮 .Tab 页 .列表 等 ,所 以 你 不 必 编 
写 所 有 内 容 , 而 是 可 以 使 用 Flutter 框 保 中 的 所 有 这 些 工具 ,添加 自己 的 代码 和 实现 自己 的 
逻辑 ,然后 使 用 这 些 功 能 构建 原生 应 用 程序 。 

因此 ,只 需 使 用 一 种 语言 Dart 编写 代码 ,你 不 必 学 习 Java 或 Swift 或 其 他 任何 东西 。 
在 熟悉 了 Flutter 框架 功能 后 ,你 可 以 根据 不 同 平台 ,编写 特定 平台 的 代码 ,这 也 是 我 将 在 本 
书 中 介绍 的 内 容 。Flutter 不 只 是 Dart 编码 , 它 还 是 一 组 工具 集合 ,允许 你 在 设备 上 测试 编 
写 的 应 用 程序 ,具有 很 酷 的 功能 ,例如 自动 重新 加 载 代 码 中 的 任何 内 容 , 以 及 在 模拟 器 上 运 
行 应 用 程序 ,非常 方便 。 

Flutter 还 提供 了 构建 工具 ,以 便 将 Dart 代码 构建 打包 ,并 上 传 到 Apple Store 或 
Android 应 用 商店 中 。Flutter 会 将 Dart 代码 编译 为 本 机 代码 ,因此 ,Flutter 既是 编程 框架 
又 是 工具 集合 。 

为 了 更 直观 地 理解 Flutter, 我 们 看 一 下 Flutter 与 Dart 关系 图 ,如 图 1. 1 所 示 , Flutter 
建立 在 Dart 上 。Dart 是 编程 语言 ,然后 Flutter 提供 了 编程 框架 , 它 与 Dart 有 很 好 的 关联 ， 
或 者 在 Dart 上 堆 建 。Flutter 提供 了 许多 实用 功能 和 大 量 小 部 件 ,还 包括 构建 测试 应 用 程 
序 的 SDK 等 工具 ,这 就 是 Flutter。 这 是 你 将 从 头 开始 学 习 的 ,我 们 将 使 用 Flutter 与 Dart 
一 起 构建 原生 移动 应 用 程序 并 将 它们 发 布 到 应 用 商店 上 。 
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Flutter framework( 框 架 ) | [一 > 具体 有 功能 集 的 框架 


Dart 框 架 ， 提 供 工 具 ， 方 法 和 UI 部 件 


Flutter Dart C 一 > 编程 语言 


Flutter SDK CC 一 > 工具 集 


1.1 Flutter 与 Dart 关 系 图 


1.2 Flutter 的 架构 


Flutter 的 架构 是 什么 样 的 ,以 及 它 的 核心 概念 是 什么 ? 使 用 Flutter 人 
构建 好 App 后 ,你 会 发 现 App 只 是 一 个 小 部 件 树 ,可 以 将 其 视 为 应 用 程序 
中 的 UI 元 素 ,整个 应 用 程序 是 一 个 UI 元 素 , 它 包含 子 元 素 , 例 如 导航 栏 ; 
或 者 是 一 些 文字 ,又 或 者 是 用 户 的 输入 框 ,也 可 以 是 一 个 按钮 。 我 们 可 以 把 
这 些小 部 件 放 到 可 视 化 的 小 部 件 中 ,例如 行 小 部 件 、 列 小 部 件 ,然后 对 行 和 列 进行 排列 组 合 
的 布局 。Flutter 是 拥抱 差异 的 ,这 意味 着 你 可 以 使 用 一 种 编程 语言 编写 运行 在 iOS 和 
Android 平台 的 应 用 。 同 时 你 也 可 以 根据 iOS 和 Android 平台 的 差异 ,去 分 别 开 发 各 自 平 
台 的 代码 ,这 就 是 Flutter 很 核心 的 一 个 概念 。 

在 Flutter 中 一 切 都 是 小 部 件 ,如 图 1. 2 所 示 的 就 是 开发 完成 后 的 一 个 页 面 , 在 这 个 页 
面 中 ,使 用 了 大 量 的 小 部 件 ,但 实际 上 比 这 里 标示 的 还 要 多 ,例如 按钮 是 一 个 小 部 件 , 它 上 面 


视频 讲解 


= 一 整个 页 面 就 是 一 个 小 部 件 
者 是 小 部 件 二 | 


图 1.2 一 切 都 是 小 部 件 
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的 文字 是 另外 一 个 小 部 件 ,整个 页 面 也 是 一 个 小 部 件 ,这样 就 形成 了 一 个 小 部 件 树 。 应 用 是 
一 个 小 部 件 , 它 包含 了 不 同 的 页 面 .然后 每 个 页 面 也 是 小 部 件 , 页 面 中 包含 的 内 容 也 是 小 部 
件 , 页 面 和 页 面 之 间 还 可 以 切换 。 

下 一 个 核心 的 问题 是 怎样 把 Flutter 中 的 Dart 编码 转换 成 原生 应 用 的 代码 。 我 们 使 用 
Dart 语言 编写 代码 ,然后 借助 Flutter API 编写 自己 的 小 部 件 。 那 么 怎样 才能 编译 成 iOS 
和 Android 的 原生 代码 呢 ? Flutter SDK 帮助 我 们 完成 这 项 工作 ,你 不 必 编 写 任何 原生 的 
代码 ,你 只 需要 用 Dart 语言 编写 ,使 用 Flutter 的 功能 ,然后 Flutter SDK 就 会 完成 代码 的 
编译 工作 ,以 上 就 是 Flutter 提供 给 我 们 的 全 部 功能 ,如 图 1.3 所 示 。 下 面 我 们 就 可 以 搭建 
开发 环境 ,开发 我 们 的 第 一 个 Flutter 应 用 程序 了 ,并 把 它 运行 到 模拟 器 上 。 


Flutter API 


Utility 


Widgets 


你 的 小 部 件 代码 


Flutter SDK 


1.3 ”Dart 编码 转换 成 原生 应 用 的 代码 


1.3 ”在 macOS 下 安装 Flutter 


样 如 果 你 是 macOS 用 户 请 跳 过 1.5 和 1. 6 节 , 下 面 我 们 看 一 下 安装 过 程 。 。 视频 讲解 

下 载 并 安装 Flutter 的 步骤 如 下 : 

首先 访问 Flutter 的 官网 https://flutter. dev/ ,浏览 器 将 会 显示 如 图 1.4 所 示 的 页 面 ， 
单 击 页 面 右上 方 “Get started”, 然 后 下 载 Flutter 的 稳定 版 本 。 

解压 文件 到 指定 目录 ,例如 /flutter 目录 下 面 ,然后 在 终端 运行 vim 一 /. bash_profile 
命令 ,配置 环境 变量 ,如 图 1.5 所 示 。 

配置 好 变量 后 ,在 终端 运行 source . /. bash_profile 使 配置 生效 ,再 运行 flutter doctor 
命令 ,这 个 命令 检查 环境 是 否 正确 ,并 向 终端 窗口 显示 报告 。Dart SDK 与 Flutter 拥 绑 在 一 
起 ,没有 必要 单独 安装 Dart。 请 仔细 检查 输出 以 了 解 可 能 需要 安装 的 其 他 软件 或 执行 的 其 
他 任务 (以 粗 体 显示 )。 如 果 没 有 安装 Xcode, 需 要 安装 一 下 Xcode 9. 0 或 以 上 版 本 。 同 样 ， 
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四 


MacOS install 


System requirements 


Operaang srtera 
* Dsk Space 700 Me 
ol 


Getthe Flutter SDK 


图 1.4 Flutter 官方 网 站 


cport PATH=S${PATH}: SAWDROTD HOME} /tools 
xport PATH=${PATH}: ${ANDROID_HOME}/platform-tools 
xport PATH=$PATH: /usr/locol/mysql/bin 
xport MONO_HOME~/Library/Frameworks/Mono. fromework/Versions/Current 
cport. PATH=$PATH: SMONO_HOME/bin 
ort PATH=S$PATH:/flutter-opp/flutter/bin 
rt GOOGLE_APPLICATION_CREDENTIALS="/x7dato/Flutter-speech-oooe4c1f9d5d. json”" 
cport PATH="$PATH":"/flutter/ .pub-coche/bin" 
_PATH=/flutter/bin/coche/dart-sdk/bin 
xport PATH-SPATH:SDART_PATH 
The next line updates PATH for the Google Cloud SDK. 
f [ -f ‘/x7data/google-cloud-sdk/path.bash.inc" ]; then . '/x7dato/google-cloud-sdk/path.bash.inc"; fi 


The next line enables shell comand completion for gcloud. 
f [ -f ‘/x?7data/google-cloud-sdk/completion.bash.inc' ]; then . '/x7data/google-cloud-sdk/completion.bash.inc'; ft 


图 1.5 配置 Flutter 环境 变量 


如 果 没 有 安装 Android Studio, 也 需要 安装 最 新 版 本 的 Android Studio。 再 运行 flutter 
doctor 命令 ,如 图 1.6 所 示 ,提示 没有 可 用 的 设备 。 

运行 open -a Simulator 命令 打开 模拟 器 ,然后 通过 命令 创建 我 们 的 第 一 个 Flutter 
App。 首 先进 入 项 目 目 录 , 我 的 项 目 目 录 是 根 目录 下 的 flutter-app, 然 后 运行 flutter create 


my_app。Flutter 会 帮 我 们 生成 Flutter 相关 的 文件 ,创建 好 后 进入 my_app 目录 ,运行 
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22 
A new version of Flutter is availoblel 
To update to the latest version, run "flutter upgrode". 
Do 
0 0 
a 
ke Di 
0 d 0 


[1] Connected device 
1 No devices available 


图 1.6 检查 环境 是 否 正 确 


flutter run 命令 ,这样 我 们 的 第 一 个 Flutter App 就 创建 好 了 ,并 成 功 运行 到 模拟 器 上 了 ,如 
图 1.7 所 示 ， 


图 1.7 Flutter App 运行 在 iOS 模拟 器 上 


Flutter 支持 热 加 载 ,完成 启动 后 , 单 击 R 键 进行 热 加 载 。 
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下 面 看 一 下 如 何 将 项 目 运行 到 Android 的 模拟 器 上 ,打开 Android Studio, 打 开 一 个 已 
有 的 项 目 ,就 是 我 们 刚才 生成 的 my_app。 首 先 需 要 创建 一 个 模拟 器 , 单 击 页 面 上 方 的 
“Tools” 按 钮 ,然后 单 击 “*AVD Manager” 按 钮 创建 一 个 Android 模拟 器 ,如 图 1. 8 所 示 。 

选择 这 个 模拟 器 , 单 击 页 面 右 侧 的 “run” 按 钮 ,把 我 们 的 Flutter App 运行 到 这 个 模拟 
器 上 。 你 可 以 使 用 Android Studio 编写 代码 ,也 可 以 使 用 Intelli] IDEA, 我 们 这 里 使 用 
Visual Studio Code 编写 。 


图 1.8 创建 一 个 Android 模拟 器 


1.4 在 macOS 下 安装 Visual Studio Code 

登录 网 站 https://code. visualstudio. com/ ,如 图 1.9 所 示 ,可 以 免费 安 加 A 
装 Visual Studio Code, 像 大 多 数 IDE 一 样 ,这 个 网 站 会 自动 识别 你 的 系统 ， ”视频 讲解 
然后 给 你 提供 相应 的 下 载 内 容 , 下 载 后 执行 这 个 文件 ,完成 安装 程序 。 

安装 非常 简单 ,没什么 特别 之 处 ,安装 完成 后 就 可 以 运行 它 了 。 在 启动 屏幕 上 选择 文件 
夹 或 文件 ,让 我 们 打开 之 前 创建 好 的 Flutter 项 目 . 如 图 1. 10 所 示 , 然 后 它 就 会 呈现 在 
IDE 中 。 

除 此 之 外 还 需 安 装 一 些 插件 ,使 IDE 对 Flutter 的 支持 更 友好 。 单 击 屏幕 上 方 的 
“View” 按 钮 选择 “Extension”, 然 后 搜索 Flutter 找到 官方 的 Flutter 插件 , 单 击 “Install” 按 
钮 ,如 图 1. 11 所 示 , 同 时 它 会 把 Dart 作为 它 的 依赖 也 安装 上 ,安装 完成 后 , 单 击 *Reload” 按 
钮 ,重新 加 载 一 下 你 的 IDE。 

还 有 一 个 可 选 的 插件 需要 安装 , 那 就 是 Material Icon Theme。 这 个 插件 跟 Flutter 没 
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Po 


Code editing. 
Redefined. 


《> $ 中 图 


图 1.9 下 载 用 于 macOS 的 Visual Studio Code 


DRER 
4 OPENEDITORS 


Welcome 
4 PRRST_APP 


图 1.10 使 用 Visual Studio Code 打开 项 目 


有 直接 关系 ,但 它 会 使 图 标 看 起 来 更 美观 。 安 装 完成 后 单 击 “*Explorer” 按 钮 , 回 到 项 目 目 
录 , 准 备 开始 开发 Flutter App。 在 main. dart 文件 中 找到 _incrementCounter() 方 法 把 
_counter 十 十 改 成 _counter 二 _counter 十 2, 如 图 1.12 所 示 ,这 样 单 击 一 次 按钮 就 会 加 2。 
现在 使 用 Flutter 的 热 加 载 功 能 ,来 到 终端 , 按 一 下 R 键 ,Flutter 就 会 执行 刚才 的 改动 。 
如 果 App 卡 住 了 ,可 以 按 Shift 十 R, 去 重新 构建 并 加 载 。 回 到 模拟 器 中 ,看 起 来 没有 什么 变 
化 ,但 是 当 我 们 单 击 模拟 器 中 的 按钮 ,会 发 现 数字 每 次 加 2, 从 这 就 可 以 看 出 使 用 Flutter 多 


直 
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EXTENSIONS: MARKETP 


flutter 
Flutter 


Flutter 2122 
Flutter support for Visual Studio Co... Dart Code | 休 15081 | 真 丰 雄 丰 真 | Repository | Licen 


Dart code Reload 痊 Flutter support for Visual Studio Code. 
Dart 2121 Reload ”Uninstall 


Dart and Flutter support for Visual S. 
Dart Rl 交 


Details 。 Contributions ”Changelog Dependencies 


Introduction 


This extension adds supportfor effectively editing, refactoring, running, and reloading 
mobile apps, as well as support for the Dart programming language. 


图 1.11 使 用 Visual Studio Code 下载 Flutter 插件 


counter 


setState(() { 


counter = _counter + 


README.md 


图 1.12 编写 main. dart 文 件 


神奇 ,以 及 使 用 它 开发 多 容易 , 热 加 载 会 贯穿 于 我 们 整个 App 开发 过 程 中 。 书 中 还 会 介绍 


样 在 Windows 系统 中 安装 Flutter ,如果 你 是 macOS | 


IDE 的 一 些 技 巧 ,现在 去 看 看 竺 
可 以 跳 过 下 面 两 节 。 


十 
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1.5 在 Windows 下 安装 Flutter 


下 面 看 一 下 如 何在 Windows 系统 上 安装 Flutter。 首 先 访问 官网 
https://flutter. dev/, 单 击 页 面 右 上 方 的 “Get started” 按 钮 ,然后 选择 视频 讲解 
“Windows”, 如 图 1. 13 所 示 。 

第 一 步 看 一 下 系统 的 要 求 .在 Windows 下 安装 Flutter 需要 Windows 7 SPI 或 更 高 的 
版 本 ,硬盘 空间 也 很 重要 ,不 能 低 于 400MB, 还 需要 安装 两 个 工具 ,如 图 1. 14 所 示 。 
Windows PowerShell 5.0 在 Windows 10 里 已 经 预 安装 了 ,如 果 是 Windows 的 其 他 版 本 需 
自己 安装 。 另 外 一 个 工具 是 Git, 可 以 在 官网 https://gitrscm. com/download/winG 下 载 
并 安装 ,Git 的 安装 很 简单 ,确认 好 硬盘 空间 后 , 单 击 “ 下 一 步 "按钮 操作 就 可 以 了 。 


€ Flutter ee。 Sow Com a » © or 


图 1.13 Flutter 官方 网 站 


System requirements 


To install and run Flutter, your development environment must meet these minimum requirements 


* Operating Systems: Windo， 
» Disk Space: 400 MB (do 


If Git for Windows is already installed, make sure you can run git commands from the command prompt or 


PowerShell 


图 1.14 需要 安装 的 工具 
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现在 我 们 就 开始 安装 Flutter, 你 可 以 从 官网 下 载 一 个 稳定 版 本 ,如 图 1. 15 所 示 。 当 你 下 载 
时 ,版 本 可 能 会 与 图 1. 15 所 示 的 版 本 不 同 , 但 不 管 怎样 ,你 只 要 下 载 官网 的 稳定 版 本 就 可 以 。 


Get the Flutter SDK 


1. Download the following installation bundle to get the latest stable release of the Flutter SDK: 


For other release channels, and older builds, see the SDK archive page 


1.15 下 载 Flutter 的 稳定 版 本 


下 载 完成 后 ,把 它 解 压 到 一 个 目录 下 ,这 个 目录 不 是 你 的 App 目录 ,而 是 SDK 目录 。 
SDK 是 软件 开发 工具 包 , 可 以 在 系统 上 全 局 安装 ,然后 从 系统 不 同 目录 下 使 用 它 来 创建 
Flutter 项 目 , 并 使 用 这 个 项 目 ,例如 我 们 解压 到 D:\Progams\flutter 目录 下 。 这 个 目录 可 
以 自己 指定 。 下 一 步 进 入 这 个 目录 ,双击 运行 flutter_console. bat 这 个 文件 , 它 会 弹出 一 个 
Flutter 命令 窗口 ,可 以 在 这 个 窗口 中 运行 Flutter 命令 ,这 里 我 们 使 用 Windows 自 带 的 命 
令 提示 符 , 在 使 用 之 前 需要 配置 一 下 全 局 变量 ,目的 是 让 Windows 能 够 找到 对 应 的 路 径 , 如 
图 1. 16 所 示 。 选 择 控制 面板 并 单 击 “ 用 户 ” 按 钮 ,下 一 步 单 击 “ 我 的 环境 变量 ”按钮 ,然后 编辑 
环境 变量 , 单 击 “ 新 建 "按钮 ,输入 安装 的 Flutter 目录 下 的 bin 目录 ,然后 单 击 “ 确 定 ” 按 钮 。 


环境 交 蜡 
0 的 用 广 交 量 (U) 
安 量 但 
OneDrive CAUsers\zhance\OneDrive 
path CAUsers\zhanceAppData\Loca\Microsoft\WindowsApps; 
TEMP CUserszhanceAppData\Loca\Temp 
TMP CNUsersvhanceWppDataWocahTemp 


CNWindowsvsystem3zvcmd exe 
CAWindows\System32\Drivers\DriverData 
NUMBER_OF_PROCESSORS 2 


os Windows_NT 
path CAProgram Files (x86)\Common Files\OracleVavaVjavapathuCAW... 
PATHEXT COM; EXE-BAT;. CMD; VBS: VBE; 1S;JSE: WSF;- WSH;. MSC. 
PROCESSOR_ARCHITECTURE AMD64 


~ 


[sew | 0 | ws) | 


图 1.16 配置 环境 变量 
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关闭 所 有 的 命令 行 , 打 开 一 个 新 的 命令 行 ,输入 命令 flutter, 按 下 回 车 键 。 如 果 屏 幕 上 
站 全 1.17 所 示 ,说 明 环境 变量 配置 成 功 了 ,就 可 以 在 命令 行 中 输入 Flutter 相关 
命令 了 ,这样 Flutter 就 安装 好 了 。 


Populates the Flutter tool s cache of binary artifects. 
Run your Flutter spp on an attached device. 

Take a screenshot from a connected device. 

Stop your Flutter app on an attached device， 

Run Flutter unit tests for the current project. 

Start and stop trecing for 8 running Flutter app- 
Upgrade your copy of Flutter. 


han “flurrer help <comand>” For more inforaation sbout 。 command. 
tun “flutter help -v” for verbose help output, including less commonly used options. 
welcome to Flutterl - https://flutter.i0 

The Flutter tool anonyuously reports feature usege statistics and cresh 
reports to je 4 order to help Gagle contrtbute faprovennts to 
Flutter over t 

Reed about dats we send with crash reports: 

Wtps://github. com/flutter/flutter/wiki/Flutter-CLI-cresh- reporting 
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图 1.17 运行 命令 flutter 后 显示 的 内 容 
下 一 步 安装 Android Studio ,访问 网 站 https://developer. android. com/studio 下 载 并 
安装 ,下 载 前 需要 同意 一 些 协议 ,下 载 完 成 后 ,执行 安装 ,确认 勾 选 了 Android Virtual 
Device 这 一 项 ,如 图 1. 18 所 示 ， 


加 Choose Components 


| 


图 1.18 勾 选 Android Virtual Device 


选择 安装 的 路 径 , 可 以 使 用 默认 的 安装 路 径 , 也 可 以 自 定义 ,再 单 击 *Next” 按 钮 ,执行 

安装 程序 ， 安装 好 后 就 可 以 启动 Android Studio 了 。 首 次 启动 会 弹出 使 用 向 导 , 提 示 你 设置 
主题 等 个 人 偏好 。 

选择 Android 虚拟 器 这 一 步 很 重要 ,如 图 1. 19 所 示 确 认 色 选 了 Android Virtual 
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Device, 然 后 检查 Android SDK 的 位 置 , 这 里 使 用 默认 的 配置 , 单 击 “Next? 按 钮 ,再 单 
“Finish” 按 钮 。 这 里 提示 大 家 ,这 一 步 需要 很 长 的 时 间 进 行 加 载 ,因为 安装 过 程 中 需要 下 载 
很 多 软件 包 。 


图 1.19 勾 选 Android 虚拟 器 

在 命令 提示 符 中 输入 flutter create first_app 来 创建 一 个 Flutter 项 目 ,项 目 名 称 中 只 
能 使 用 下 夯 线 ,而 不 能 使 用 空格 和 横 杠 ,然后 按 回 车 键 ,Flutter 会 自动 创建 一 些 配 置 文件 。 

创建 完成 后 ,打开 Android Studio, 选 择 一 个 存在 的 Android 项 目 , 就 是 刚才 创建 好 的 
Flutter 项 目 。 打 开 一 个 模拟 器 ,因为 开发 阶段 大 部 分 功能 是 在 模拟 器 上 调试 并 开发 的 , 然 
后 再 到 真实 的 设备 上 测试 。 单 击 屏幕 上 方 的 “Tools” 按 钮 ,选择 “*AVD Manager” 按 钮 , 单 击 
“十 Create Virtual Device...” 按 钮 创建 一 个 新 的 模拟 器 ,如 图 1. 20 所 示 。 

首先 选择 一 个 设备 ,然后 页 面 会 显示 创建 向 导 。 这 里 需要 选择 模拟 器 的 系统 ,请 选择 使 
用 最 新 的 版 本 , 单 击 “Next” 按 钮 。 最 后 配置 Graphics, 选 择 Hardware, 如 图 1. 21 所 示 。 单 
击 “Finish” 按 钮 ,这 样 这 个 模拟 器 设备 就 创建 好 了 。 单 击 运行 图 标 ,如 图 1. 22 所 示 ,模拟 器 
就 显示 出 来 了 。 

下 一 步 需要 在 Android Studio 中 安装 缺少 的 依赖 项 和 插件 , 单 击 IDE 右上 方 的 “Install 
plugins” 按 钮 ,如 图 1. 23 所 示 , 然 后 重启 。 启 动 好 后 IDE 右 下 角 会 有 一 个 提示 ,如 图 1. 24 
所 示 ,建议 安装 插件 , 单 击 “Configure plugins” 按 钮 ,会 弹出 Flutter 插件 , 单 击 “Accept” 按 
钮 ,同时 也 会 自动 安装 Dart 插件 ,Android 完成 后 需要 再 次 重启 IDE。 回 到 命令 提示 符 窗 
口 ,运行 命令 flutter doctor ,命令 提 示 符 窗口 会 提示 漏 掉 了 哪些 内 容 。 


第 1 章 “Flutter 简 介 | 其 15 


图 1.20 创建 一 个 新 的 模拟 器 


irtual Device (AVD) 


图 1.21 配置 Graphics 
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图 1.22 启动 模拟 器 


® frst_app [Ddevelopment\flutte first_app] - hb main dart lfwst_app] - Android studio - OO x 


图 1.23 安装 插件 
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图 1.24 配置 插件 


回 到 Android Studio, 单 击 IDE 右上 角 “ ”运行 按钮 ,运行 我 们 创建 的 这 个 Flutter 项 
目 , 可 以 看 到 Flutter App 已 经 运行 到 模拟 器 上 了 , 单 击 “ 浮 动 ” 按 钮 ,可 以 增加 计数 器 ,或 者 
在 项 目的 目录 下 运行 命令 flutter run 来 启动 。 


1.6 在 Windows 下 安装 Visual Studio Code 


我 们 使 用 Visual Studio Code, 可 通过 网 站 https://code. visualstudio. 
com/ 下 载 IDE, 如 图 1.25 所 示 。 这 个 IDE 是 免费 的 ,并 且 支 持 Flutter 的 
扩展 ,访问 网 站 , 它 会 根据 你 的 系统 提供 一 个 适合 的 下 载 版 本 。 下 载 并 安装 
IDE, 安 装 步骤 简单 ,没有 什么 特别 需要 说 明 的 ,安装 完成 后 就 可 以 运行 它 了 。 


《 In 
Redefined 


图 1.25 在 Windows 下 下 载 安装 Visual Studio Code 
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为 了 使 这 个 IDE 更 好 用 ,需要 添加 


搜索 Flutter 插件 ,安装 官方 的 Flutter 插件 ,Dart 会 随 这 个 插件 一 起 安装 ,安装 完成 后 ， 
启 IDE。 


flutter 


Flutter 
Flutter 


support for Visu, 


15.056 站 灾 六 六 奖 


Repository | License 


refactonng. running, and reloading mobile apps, as 


Installation 


图 1.26 使 用 Visual Studio Code 下 载 Flutter 插件 


另外 ,还 要 安装 一 个 插件 Material Icon Theme, 这 个 插件 与 Flutter 安装 无 关 , 它 只 是 
会 使 IDE 变 得 美观 。 在 项 目 目 录 下 找到 main. dart 文件 ,然后 到 incrementCounter() 方 法 


里 ,把 _counter 二 


上 改 成 counter 王 _counter 十 2, 如 图 1.2 


所 示 。 


class _NyHomePageState extends StatedtyHonePage> { 
int _counter = 0; 


void _increwentCounter() { 
setState(() { 
his ca k that someth 
rerun the build met 
ed values, If 
the 


chs 


@override 


Widget build(BuildContext cont! 


ext) { 
T 


° instanc 


/ than having 
， return new Sceffotd( 


图 1.27 编写 main. dart 文件 


- 些 插件 , 单 击 “Extension” 图 标 , 如 图 1. 26 所 示 。 
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这 样 每 次 单 击 * 浮 动 "按钮 就 会 加 2。 来 到 命令 行 窗口 ,不 需要 使 用 Ctrl 十 C 键 退 出 ,只 
需要 按 R 键 进行 热 加 载 就 可 以 使 改动 生效 ,这 意味 着 你 不 需要 重新 Build 就 可 以 修改 你 的 
App 了 。 如 果 更 新 失败 或 者 模拟 器 卡 住 了 ,需要 按 Shift 十 R 键 重新 Build 才 可 以 。 接 下 来 
回 到 模拟 器 , 单 击 “ 加 号 浮动 ”按钮 ,会 看 到 计数 器 每 次 增加 2 而 不 是 1, 这 是 第 一 个 小 的 改 
变 , 接 下 来 我 们 将 更 深入 地 学 习 Flutter。 


1.7” Flutter 中 的 Material Design 体系 


Material Design 是 谷歌 创建 的 一 个 设计 系统 , 它 看 起 来 如 图 1. 28 所 示 。Flutter 使 用 
了 Material Design。 它 不 仅 是 一 种 样式 ,还 可 以 灵活 地 自 定义 样式 ,例如 可 辐 mg 加 
a 


以 改变 颜色 .位置 或 者 包含 其 他 小 部 件 ,这 样 就 可 以 设计 出 自己 的 小 部 件 。 

Material Design 已 经 植 人 到 Flutter 中 了 ,Flutter 也 依赖 Material Design， Ee 

所 以 Flutter App 实际 上 也 是 Material App。 国学 wh 
Flutter 正在 积极 地 快速 发 展 ,现在 已 经 有 了 很 多 稳定 版 本 , 随 着 版 本 视频 讲解 

的 更 新 ,功能 也 随 之 更 新 。 关 注 官网 可 以 及 时 了 解 它 的 变化 。 同 时 也 会 有 

更 多 的 第 三 方 软件 包 添加 到 Flutter 的 生态 系统 中 。Flutter 也 可 能 会 存在 Bug, 如果 过 到 

Bug, 可 以 先 定 位 Bug, 确 定 到 底 哪里 出 问题 了 ,然后 关注 这 个 问题 。 


三 Page title vm Q 


图 1.28 Material Design 与 Flutter 的 关系 


深入 理解 Flutter 基础 
知识 和 小 部 件 概 念 


本 章 将 深入 学 习 Flutter 和 Dart 及 使 用 Flutter 构建 移动 App, 还 包括 学 习 Flutter 的 
核心 基础 知识 ,主要 是 关于 小 部 件 的 。 不 仅 在 理论 上 学 习 Flutter, 还 将 使 用 Flutter 构建 
项 目 。 

现在 让 我 们 创建 一 个 新 的 Flutter 项 目 。 


2.1 创建 一 个 Flutter 项 目 


要 创建 一 个 Flutter 项 目 ,需要 使 用 Flutter 命令 。 首 先 需 要 配置 
Flutter 的 环境 变量 ,在 第 1 章 已 经 介绍 了 ,然后 在 命令 提示 符 中 运行 命令 
flutter create 加 上 项 目 名 称 , 如 图 2. 1 所 示 , 如 果 项 目 名 称 涉 及 多 个 单词 ， 视频 讲解 
请 使 用 下 画 线 分 隔 ,而 不 可 以 使 用 横 线 和 空格 , 单 击 回 车 键 。 

这 将 在 当前 运行 命令 的 目录 下 创建 一 个 新 的 目录 ,所 以 要 确认 好 当前 的 目录 。 新 创建 
的 目录 中 包含 了 大 量 Flutter 自动 创建 的 Android 和 iOS 相关 文件 。 项 目 创建 完成 后 ,在 日 
志 中 会 显示 一 些 可 以 运行 的 命令 。 现 在 不 需要 运行 它们 ,而 是 使 用 IDE 打开 这 个 新 创建 的 
项 目 。 


.09 1. bash 

Last togtn: Tus Apr 2 ] 芭 :42:15 on ttys681 

Tau hove new motl. 

locolhost:~ michoels cd /flutter-project/ 
| 


图 2.1 创建 Flutter 项 目的 命令 


这 里 使 用 Visual Studio Code 打开 这 个 项 目 , 也 可 以 使 用 Android Studio 打开 它 。 首 
先 确保 Visual Studio Code 安装 了 Flutter 插件 ,然后 打开 Visual Studio Code 集成 的 终端 ， 
在 View 下 选择 Terminal, 如 图 2.2 所 示 。 
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Output 
Debug Console 
Terminal [^] 


Problems 


@ README.md 


图 2.2 打开 Visual Studio Code 中 的 终端 


在 当前 项 目 目录 下 的 Terminal 中 运行 Flutter 命令 ,但 是 现在 还 启动 不 了 ,因为 运行 
Flutter 项 目 需要 一 个 模拟 器 或 一 个 真实 的 设备 。 这 里 使 用 模拟 器 ,所 以 让 我 们 快速 启动 一 


个 模拟 器 ,打开 Android Studio, 单 击 “Tools” 按 钮 ,再 单 击 “*AVD Manager” 按 钮 ,如 图 2. 3 
所 示 。 


larold Studlo Fle Edt View Navigue Cede Anayze Relactor Buld Run WooW VCS Wndow Hep 


[ee 的 ko etme eas) .somon surt ne 
My nutne ne es 
- - Tesks & Contes » 
二 本 (DE screung Console 
Create Command-line Launcher.. 
omm 下 


图 2.3 打开 Visual Studio Code 中 的 终端 
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选择 一 个 设备 ,也 可 以 创建 一 个 新 的 设备 ,并 单 击 右 侧 的 “ * "运行 按钮 ,如 图 2. 4 所 示 。 


入 Your Virtual Devices 
人 


图 2.4 启动 Android 模拟 器 


模拟 器 运行 起 来 后 , 回 到 Visual Studio Code 中 ,启动 Flutter 项 目 , 单 击 “Debug” 按 钮 ， 
选择 “Start Debugging”, 或 者 “Start Without Debugging”, 如 图 2.5 所 示 。 


4 OPEN EDITOR: 
4 FLUTTER_NEW 
Wm .idea 
| ”要 
| 各 
MS lib 
WS test 
gitignc 
metad 


package 


图 flutter_news 

@ pub 
[| 

@ README.md 


图 2.5 启动 Flutter 项目 


此 时 模拟 器 有 可 能 会 提示 选择 环境 变量 ,只 需 选 择 Flutter And Dart 即 可 。 构 建 好 
Flutter 项 目 后 ,IDE 会 发 送 给 模拟 器 ,如 图 2.6 所 示 。 

顶部 有 个 控制 面板 ,可 以 调试 .重启 、 退 出 、 暂 停 项 目 。 这 个 应 用 程序 如 图 2. 6 中 模拟 器 
所 示 , 这 是 Flutter 自 带 的 ,而 不 是 我 们 编写 的 ,下 一 节 我 们 将 重新 编写 一 个 应 用 程序 。 
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图 2.6 运行 的 Flutter 项 目 


2.2 Flutter 目录 结构 及 main 文件 


我 们 启动 并 在 模拟 器 上 运行 了 Flutter 项 目 ,现在 打开 main. dart 这 个 
文件 并 删除 所 有 内 容 , 如 图 2.7 所 示 , 从 零 开 始 学 习 如 何 编写 Flutter 代码 。 

首先 介绍 一 下 图 2. 7 中 左 侧 的 目录 和 文件 : . idea 目录 是 Android 
Studio 中 的 文件 不 要 删除 ,也 不 需要 了 解 其 中 的 内 容 ; android 和 ios 目录 
非常 重要 ,因为 它们 保存 着 本 机 的 代码 ,并 且 是 应 用 构建 过 程 的 重要 部 分 ,android 和 ios 目 
录 中 的 内 容 不 经 常用 到 ,后 面 的 章节 用 到 时 再 学 习 ; lib 目录 是 编写 整个 Flutter 应 用 的 地 
方 ,我 们 将 在 这 个 目录 下 编写 Dart 和 Flutter 代码 ; test 目录 下 可 以 编写 自动 化 测试 代码 。 
其 他 文件 是 基本 的 配置 文件 ,例如 . gitignore 文件 是 版 本 控制 文件 ,其 他 配置 文件 中 包含 
SDK 的 配置 信息 ,不 需要 编辑 它们 。pubspec. yaml 文件 是 配置 整个 项 目 及 其 依赖 的 ,这 个 
文件 是 很 重要 的 。 后 面 章节 会 介绍 添加 第 三 方 包 , 例 如 相机 设备 ,会 经 常 修改 这 个 文件 中 的 
某 些 配 置 ,现在 编写 我 们 应 用 程序 的 一 些 基 础 代码 。 

main. dart 文件 是 一 个 很 重要 的 文件 ,不 可 以 重新 命名 ,因为 Flutter 构建 项 目 时 会 寻 
找 main. dart 这 个 文件 ,文件 中 包含 一 些 特殊 的 方法 来 启动 整个 App, 其 中 有 一 个 main() 
方法 ,在 Flutter 中 创建 方法 ,需要 输入 一 个 名 字 例 如 main, 这 个 方法 比较 特殊 ,App 在 启动 
的 时 候 会 寻找 这 个 main 方法 。 其 他 的 方法 可 以 自己 命名 ,然后 输入 括号 ,在 括号 中 可 以 指 
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图 2.7 Flutter 项 目 中 的 main. dart 


定 任何 参数 ,然后 在 方法 体 中 使 用 这 些 数据 ,但 是 main() 方 法 不 接受 任何 参数 ,方法 体 中 执 
行 的 代码 需要 用 大 括号 括 起 来 。 如 果 执 行 某 个 方法 ,可 以 像 如 下 代码 这 样 写 。 

main(); // 调 用 main() 方 法 

但 是 对 于 main() 这 个 特殊 的 方法 我 们 不 能 去 调用 它 ,Flutter 会 自动 调用 它 , 所 以 这 就 
是 我 们 必须 要 命名 为 main() 并 且 把 它 放 到 main. dart 中 的 原因 。 现 在 可 以 启动 App, 开 始 
泻 染 用 户 界 面 并 运行 到 操作 系统 上 ,这 可 以 通过 Android 和 iOS 来 完成 ,但 是 要 在 屏幕 上 呈 
现 一 些 内 容 , 需 要 在 main() 方 法 中 做 一 些 事情 。 例 如 将 一 个 小 部 件 附 加 到 屏幕 上 , 接 下 来 
讲解 什么 是 小 部 件 。 


2.3 ” Flutter 中 小 部 件 的 概念 


Flutter 中 一 切 都 是 小 部 件 , 小 部 件 是 构造 块 ,UI 组件。 如 果 将 一 个 
Flutter 应 用 运行 到 移动 设备 上 , 它 通常 由 多 个 小 部 件 组 成 。 例 如 项 部 的 标 
题 栏 、 导 航 栏 ,标题 图 片 、 包 含 内 容 的 列表 等 ,它们 都 是 单独 的 小 部 件 ,通常 
还 包含 其 他 小 部 件 ,如 图 2. 8 所 示 。 图 2. 8 中 的 列表 含 列表 项 作为 子 部 件 。 
页 面 本 身 也 是 小 部 件 , 如 图 2. 8 所 示 的 scaffold 小 部 件 ,甚至 整个 应 用 程序 都 包含 在 一 个 根 
小 部 件 中 。 

因此 小 部 件 实际 上 是 UI 组 件 , 但 它们 不 仅仅 是 视觉 组 件 ,还 包含 逻辑 组 件 。 例 如 , 按 
钮 小 部 件 不 仅 会 显示 按钮 ,还 会 定义 单 击 按钮 时 会 发 生 什么 。 构 建 Flutter 应 用 程序 是 通过 
创建 UI, 然 后 编写 UI 的 逻辑 来 实现 的 ,例如 选择 移动 设备 上 的 图 片 并 上 传 到 服务 器 上 、 从 


第 2 章 “深入 理解 Flutter 基 础 知识 和 小 部 件 概念 | 其 25 


下 二 大 市 肥 融 丰 冤 其 他 不 部 作 
页 面 小 部 件 Heoader Imoge 
(scaffold) 


图 2.8 Flutter 应 用 中 的 小 部 件 


服务 器 上 获取 数据 并 演 染 到 屏幕 上 等 。 
我 们 可 以 将 Flutter 应 用 视 为 小 部 件 的 树 ,一 个 根 小 部 件 包 含 整个 应 用 程序 ,可 能 会 有 
40 个 不 同 页 面 的 小 部 件 作为 子 小 部 件 ,然后 为 子 小 部 件 嵌 套 其 他 小 部 件 ,如 图 2. 9 所 示 。 


Flutter App 


一 


评论 页 面 


资讯 页 面 


ListView 深 动 图 片 | 景区 输入 框 ] 发 布 按钮 


图 2.9 Flutter 中 的 小 部 件 树 


实际 上 我 们 建立 了 如 图 2. 9 所 示 的 一 个 小 部 件 树 ,我 们 可 以 使 用 Dart 编程 语言 完成 所 
有 这 些 工 作 ,让 我们 看 看 如 何 创建 这 样 的 小 部 件 树 。 


2.4 创建 Flutter 小 部 件 


现在 App 中 没有 任何 内 容 ,我 们 只 写 了 一 个 main() 方 法 ,将 来 它 将 会 四 所 2 
被 调用 ,但 是 我 们 不 知道 在 main() 方 法 里 执行 什么 。 上 一 节 我 们 学 习 到 整 。” 视频 讲解 
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个 Flutter 应 用 都 是 由 小 部 件 组 成 的 ,所 以 我 们 应 该 写 一 个 小 部 件 。 首 先 创建 根 小 部 件 ,要 
实现 它 需要 使 用 Dart 语言 的 一 个 特性 一 一 类 。 你 可 能 在 其 他 的 语言 中 听 说 过 这 个 概念 ， 
Dart 是 面向 对 象 的 编程 语言 ,所 以 一 切 都 是 对 象 , 一 个 对 象 就 是 一 个 简单 的 数据 结构 ,类 人 允 
许 为 对 象 创建 属性 和 方法 。Flutter 提供 了 很 多 类 供 我 们 使 用 ,但 也 可 以 创建 自己 的 类 。 
输入 class 关键 字 后 ,可 以 输入 一 个 类 名 ,类 名 以 一 个 大 写字 母 开头 ,然后 输入 名 字 , 代 码 


如 下 : 

classMyapp // class 关键 字 加 上 类 名 

这 里 将 Myapp 作为 一 个 词 使 用 ,也 可 以 使 用 多 个 词 ,每 个 词 以 大 写字 母 开 头 ,代码 
如 下 : 

classMyApp // 将 MyApp 作为 多 个 词 来 命名 


类 的 名 称 不 能 使 用 横 线 、 下 面 线 ,这 就 是 类 。 现 在 可 以 给 这 个 类 加 一 些 特性 ,例如 方法 、 
变量 ,变量 你 可 能 从 其 他 的 语言 中 了 解 过 ,变量 是 简单 的 ,小 的 数据 结构 ,例如 name== 'tom'。 
但 是 ,如 果 想 把 一 个 混合 的 数据 赋值 给 name, 需 要 把 name 指向 一 个 对 象 。 

现在 我 们 想 创建 一 个 小 部 件 ,一 个 小 部 件 是 一 个 对 象 ,这 个 对 象 是 由 类 来 定义 的 ,但 是 
我 们 自己 创建 的 类 ,Flutter 不 认为 它 是 一 个 小 部 件 类 ,因为 一 个 小 部 件 需 要 某 些 特性 ,因此 
我 们 的 类 必须 继承 其 他 的 类 ,继承 使 用 extends 这 个 关键 字 , 人 允许 继承 一 个 类 ,意味 着 当前 
类 继承 了 这 个 类 的 所 有 特性 ,然后 你 可 以 使 用 这 些 特性 或 者 添加 自己 的 特性 。 如 果 继 承 了 
Flutter 的 类 ,Flutter 便 会 知道 它 可 以 安全 地 使 用 这 个 类 的 对 象 ,并 在 屏幕 上 绘制 一 些 内 
容 。 我 们 需要 继承 的 类 来 自 Flutter 框架 ,所 以 需要 了 解 特性 import。 编 写 代码 时 需要 使 
用 Flutter SDK 框架 中 的 代码 ,因此 需要 通过 import 关键 字 , 引 入 需要 的 文件 的 路 径 , 从 这 
些 特性 可 看 出 Dart 是 一 门 模块 化 的 语言 ,同时 也 意味 着 可 以 将 代码 切 分 成 多 个 文件 ,下 面 
引入 Flutter 包 中 的 文件 ,代码 如 下 : 


import 'package:flutter/material. dart';// 引 入 Flutter 框架 中 的 文件 
我 们 通过 package: 加 包 名 flutter,flutter 包 中 包括 很 多 的 子 包 或 者 文件 ,可 以 通过 /加 
文件 名 来 定位 文件 ,上 述 例子 中 引入 了 material. dart 这 个 文件 。 现 在 我 们 可 以 继承 这 个 文 


件 中 暴露 的 一 些 类 。 例 如 无 状态 小 部 件 StatelessWidget、 有 状态 的 小 部 件 StatefulWidget。 
因为 我 们 引入 了 对 应 的 文件 ,所 以 这 里 继承 StatelessWidget, 代 码 如 下 : 


// Chapter02/02 - 04/lib/main. dart 
class Myapp extends StatelessWidget { // 继 承 无 状态 小 部 件 


} 


现在 就 可 以 把 它 作 为 一 个 小 部 件 并 显示 在 屏幕 上 了 。 这 里 还 有 一 个 很 重要 的 事情 需要 
说 明 ,将 在 下 一 节 介绍 。 
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2.5 小 部 件 中 的 build 方法 


现在 Myapp 类 已 经 继承 了 StatelessWidget, 因 此 Myapp 是 一 个 有 效 加 和 二 
的 小 部 件 了 ,我 们 可 以 看 到 Myapp 下 面 有 一 个 横 线 ,如 果 把 鼠标 悬 停 在 上 《视频 讲解 
面 , 会 看 见 一 些 错误 的 提示 信息 ,如 图 2. 10 所 示 。 


maindart x 


import ‘package:flutter/material .dart"; 


class Hyapp extends StatelessWidget 
main() 
Missing concrete implenentation of 


StatelessWidget .build. dart(non abstract class inherits abstract_ member_ one) 


ss Hyapp ns StatelessWidgeti| 


图 2.10 Myapp 中 错误 的 提示 信息 


提示 当前 类 中 缺少 build 方法 ,所 以 输入 buildC) 加 上 大 括号 ,定义 一 个 方法 。 但 还 是 有 
下 画 线 ,如 图 2. 11 所 示 。 


class Hyapp ex s StatelessWidget{ 
builg(){ 
build() ~ Widget 


Describes the part of the user interface represented by this widget 


The framework calls this method when this widget is inserted into the tree in a given 
[BuildContext] and when the dependencies of this widget change (e g.. an [Inheritedwidget] 
referenced by this widget changes). 


The framework replaces the subtree below this widget with the widget returned by this 
method. either by updating the existing subtree or by removing the subtree and inflating a 
new subtree, depending on whether the widget returned by this method can update the root 
of the existing subtree. as determined by calling [Widget canUpdate] 


Typically implementations return a newly created constellation of widgets that are 
configured with information from this widget's constructor and from the given 
[BuildContext]. 


图 2.11 build 方法 提示 的 错误 信息 


这 里 需要 告诉 Flutter, Myapp 这 个 类 创建 的 对 象 是 一 个 小 部 件 ,需要 显示 到 屏幕 上 ,也 
可 以 认为 Flutter 通过 调用 对 象 中 的 build() 方 法 来 显示 某 些 内 容 , 这 就 是 要 在 创建 小 部 件 
中 添加 build() 方 法 的 原因 。build() 方 法 实际 上 需要 通过 方法 中 的 参数 传递 一 些 数 据 , 这 
些 数据 是 Flutter 传递 的 。 因 为 Flutter 会 调用 build() 方 法 ,build() 方 法 需要 一 个 参数 
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context,context 实际 上 是 一 个 对 象 , 包 含 应 用 的 一 些 元 信息 ,以 及 绘制 小 部 件 的 位 置 。 例 
如 context 中 包含 了 应 用 的 主题 ,目前 可 以 先 忽略 它 。 

现在 我 们 在 build() 方 法 中 添加 一 些 内 容 。build() 方 法 需要 返回 内 容 , 所 以 需要 使 用 
return 关键 字 。 因 为 Flutter 需要 执行 build() 方 法 来 知道 在 屏幕 上 绘制 什么 ,所 以 Flutter 
需要 执行 build() 方 法 返回 的 内 容 ,我 们 在 方法 体 中 添加 return 关键 字 , 但 现在 的 问题 是 需 
要 在 这 里 返回 什么 。 这 里 有 一 个 很 重要 的 规则 ,在 build() 方 法 中 ,小 部 件 总 会 返回 另 一 个 
小 部 件 ,一 直 递 归 到 Flutter 附带 的 小 部 件 为 止 。 

这 里 可 以 使 用 Flutter 附带 的 MaterialApp 小 部 件 , 它 是 一 个 很 特殊 的 小 部 件 , 可 以 用 
来 包装 整个 App。App 可 以 通过 它 来 设置 主题 ,也 可 以 添加 一 个 导航 器 ,使 应 用 在 不 同 页 
面 间 进 行 切 换 等 。 所 以 MaterialApp 是 核心 的 根 小 部 件 ,在 每 个 Flutter App 中 都 会 用 到 
它 。 在 Myapp 小 部 件 中 将 MaterialApp 返回 ,作为 最 顶级 的 小 部 件 , 代 码 如 下 : 


// Chapter02/02 - 05/1ib/main. dart 


class Myapp extends StatelessWidget { // 继承 StatelessWidget 
build(context) { // 添加 build() 方 法 
return MaterialApp(); // 返回 MaterialApp 根 小 部 件 


} 
} 
MaterialApp 小 部 件 中 可 以 配置 一 些 内 容 , 并 显示 在 屏幕 上 。 现 在 模拟 器 上 面 没有 显 
示 任 何 内 容 , 所 以 需要 给 MaterialApp 传递 数据 ,下 一 节 来 实现 这 个 功能 。 


2.6 添加 Scaffold 页 面 回 
不 
到 目前 为 止 ,Flutter 的 内 容 已 经 涵盖 了 很 多 方面 ,但 是 在 模拟 器 的 屏 江 l 
幕 上 还 是 什么 都 看 不 到 ,所 以 我 们 需要 告诉 MaterialApp 需要 做 些 什么 , 然 回 全 
后 显示 到 模拟 器 的 屏幕 上 。 我 们 可 以 给 MaterialApp 传递 参数 。 之 前 在 创 。 视频 讲解 
建 build() 方 法 时 需要 一 个 参数 ,同样 MaterialApp 的 构造 器 也 需要 传递 参 
数 , 它 接收 命名 的 参数 ,这 意味 需要 添加 一 个 名 字 ,例如 home。 这 个 参数 加 上 冒号 然后 加 
上 传递 的 值 ,还 有 一 种 是 位 置 参 数 , 例 如 build(Ccontext) ,这 里 的 参数 不 需要 名 字 ,build( ) 方 
法 中 传递 的 第 一 个 参数 会 被 认为 是 context。 在 Flutter 中 我 们 会 经 常用 到 命名 参数 。 现 在 
我 们 需要 给 home 这 个 参数 传递 一 个 值 ,home 需要 传递 的 实际 上 是 小 部 件 , 它 们 会 被 绘制 
到 屏幕 上 。 这 里 你 可 以 使 用 Scaffold, 它 是 material 包 附 带 的 ,Scaffold 可 以 在 App 中 创建 
一 个 页 面 , 默 认 是 白色 的 背景 ,也 可 以 修改 这 个 背景 颜色 。 
Scaffold 还 可 以 添加 标题 栏 等 小 部 件 。 同 样 需要 在 构造 器 中 传递 数据 ,其 中 一 个 参数 
叫 appBar, 输 入 冒号 ,添加 一 个 顶部 的 导航 栏 AppBar() 小 部 件 , 现 在 同样 也 需要 配置 
AppBar 来 显示 内 容 。 其 中 一 个 参数 为 title。 把 鼠标 悬 停 在 AppBar 上 ,会 看 到 我 们 可 以 传 
递 哪些 参数 ,你 会 发 现 title 这 个 参数 同样 会 传递 一 个 小 部 件 。 这 里 我 会 用 到 这 个 小 部 件 链 
上 的 最 后 一 个 小 部 件 Text, Text 是 一 个 需要 传递 String 类 型 数据 的 小 部 件 。Text 是 由 位 置 


全 
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参数 创建 的 ,所 以 只 需要 传递 一 个 String 类 型 的 数据 ,并 放 在 参数 的 第 一 个 位 置 ,代码 如 下 
// Chapter02/02 - 06/1ib/main. dart 


return MaterialApp( 


home: Scaffold( // 给 MaterialApp 中 的 home 传 值 
appBar: AppBar( // 给 Scaffold 中 的 appBar 传 值 
title: Text( ' 资 讯 标题 ')， // 给 Text 小 部 件 传 值 
), 
), 


这 样 Text 小 部 件 就 可 以 获取 到 数据 了 。 现 在 传递 一 个 String 类 型 的 数据 , 它 将 会 
显示 出 来 。 

但 是 在 模拟 器 的 屏幕 上 还 是 什么 都 看 不 到 ,这 是 因为 虽然 我 们 创建 了 小 部 件 , 但 没有 挂 
载 到 屏幕 上 。 在 main() 方 法 中 ,没有 执行 任何 内 容 。main() 方 法 中 需要 运行 一 个 特殊 的 方 
法 ,也 是 material 包 附 带 的 ,这 个 特殊 方法 是 runApp()。runApp() 方 法 需要 传递 一 个 参 
数 ,这 个 参数 必须 是 一 个 小 部 件 。 创 建 小 部 件 Myapp, 代 码 如 下 : 


// Chapter02/02 - 06/1ib/main. dart 

void main() { 

runApp(Myapp( )); // 调用 runApp, 并 把 Myapp 小 部 件 传 递 给 runApp 
} 


Myapp 中 包含 了 MaterialApp、Scaffold 等 。 可 以 尝试 使 用 热 加 载运 行 模拟 器 ,如 果 失 
败 了 ,需要 退出 ,然后 单 击 “Start Without Debugging” 来 启动 。 这 就 是 当前 我 们 的 App, 如 
图 2. 12 所 示 。 


4 ©O Mm mndn x 
2 opensorons import ‘package:f\utter/naterial .dar 
x maindart tb 
D Keyboard Shortcuts 
名 wogettestdart ie } 


main() { 
runApp(Myapp());| 


class Nyapp extends StatelessWidget ( 


return NaterialApp( 
home: Scatfold( 
appBar: AppBar( 
title: Text( ' 责 讯 标题 ') ， 
)，// AppBar 
Scaffotd 
» 最 test materiaUpp 
© glignore 
D metadata 
Y packages 
图 futter newsiml 
A pubspeciock 
pubspec yaml 
@ README md 


图 2.12 成 功 启动 Flutter 应 用 
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可 以 看 到 AppBar 和 Scaffold 的 白色 背景 ,以 及 包含 这 一 切 的 MaterialApp 的 小 部 件 。 


2.7 深入 学 习 Dart 语法 


main() 方 法 ,然后 调用 runApp() 方 法 ,在 runApp() 方 法 中 创建 了 一 个 我 们 ee 
自己 的 类 的 对 象 ,实际 上 是 调用 Flutter 的 build() 方 法 返回 了 一 个 小 部 件 ”视频 讲解 
树 。 我 们 用 Dart 语言 编写 了 以 上 内 容 , 例 如 导入 语句 、 方 法 的 语法 、 类 等 ,这 些 都 是 用 Dart 
编写 的 。Dart 实际 上 是 一 种 强 类 型 语言 ,意味 着 必须 定义 方法 和 变量 的 类 型 。 这 对 开发 者 
来 说 是 有 帮助 的 ,因为 如 果 你 输入 一 个 错误 的 类 型 ,IDE 会 有 错误 的 提示 信息 ,在 构建 应 用 
过 程 中 也 会 被 发 现 。 

build() 方 法 返回 了 一 个 小 部 件 ,但 是 我 们 并 没有 声明 返回 类 型 ,不 过 IDE 也 没 提示 报 
错 。 这 是 因为 Dart 语言 实际 上 已 经 根据 MaterialApp 小 部 件 推测 出 会 返回 一 个 小 部 件 。 
为 了 使 这 段 代码 更 清晰 ,我 们 需要 在 build() 方 法 前 面 加 Widget 这 个 类 型 ,意味 着 Widget 
是 我 们 期 望 的 返回 类 型 。 如 果 把 return 返回 的 内 容 设 置 为 "hello' ,IDE 会 给 我 们 错误 的 提 
示 信 息 , 显 示 返 回 类 型 错误 。 这 样 当 保存 代码 的 时 候 ,代码 不 能 被 重新 编译 。 所 以 在 build 
() 方 法 前 ,要 改 成 返回 一 个 小 部 件 。 代 码 如 下 : 


Widget build(context) { // build 方 法 返回 类 型 是 Widget 


} 


添加 返回 类 型 可 以 避免 出 现 错误 。build() 方 法 实际 上 是 StatelessWidget 中 一 个 已 经 
定义 的 方法 ,我 们 可 以 在 build() 方 法 的 参数 前 面 加 一 个 类 型 ,使 代码 更 清晰 ,参数 context 
的 类 型 是 BuildContext, BuildContext 是 material 包 中 提供 的 另外 一 个 类 ,代码 如 下 : 


Widget build(BuildContext context) { // 添 加 参数 类 型 


} 


这 样 我 们 可 以 很 清楚 地 知道 context 是 BuildContext 的 类 型 ,确保 我 们 在 使 用 时 不 会 
犯错 。 对 IDE 来 说 也 很 好 ,在 IDE 中 我 们 可 以 通过 context 加 点 来 获得 提示 和 建议 。 

我 们 也 可 以 给 main() 方 法 加 返回 类 型 , main() 方 法 没有 返回 任何 内 容 , 可 以 在 前 面 加 
void 类 型 ,表示 这 个 方法 不 会 返回 任何 内 容 , 代 码 如 下 : 

void main() { // 添 加 返回 类 型 void 

runApp(Myapp( )); // 运 行 App 

} 

如 果 有 返回 值 ,IDE 会 提示 报错 。 现 在 的 代码 比 之 前 更 易 读 了 ,所 以 强烈 建议 使 用 类 
型 ,类 型 是 一 个 关键 的 特性 ,将 在 后 面 章 节 中 经 常 使 用 它 。 
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如 果 main() 方 法 中 只 有 一 行 代码 ,有 一 个 更 简单 的 写法 ,代码 如 下 : 

void main() => runApp(Myapp()); // 方法 体 中 只 有 一 行 代码 的 写法 

build() 方 法 实际 上 是 StatelessWidget 类 中 的 方法 ,我 们 覆盖 了 它 , 所 以 我 们 需要 在 这 
里 加 一 个 注解 ,代码 如 下 : 


// Chapter02/02 — 07/1ib/main. dart 
@override // 覆盖 注解 
Widget build(BuildContext context) { 


} 

添加 @override 注解 不 是 必须 的 ,@override 可 以 告诉 Dart 和 Flutter, 我 们 有 意 重 写 
这 个 方法 。 加 注解 可 以 使 代码 变 得 好 理解 。 现 在 代码 变 得 更 清晰 了 ,下 一 节 我 们 给 这 个 应 
用 加 些 其 他 的 内 容 。 


2.8 使 用 Card 小 部 件 和 图 片 


它 上 面 创 建 AppBar, 还 可 以 添加 其 他 参数 ,把 鼠标 悬 停 在 Scaffold 上 ,会 看 ”视频 讲解 
到 有 一 个 参数 body, 如 图 2. 13 所 示 。 


(new) Scaffold Scaffold({Key key，PreferredSizeWidget appBar, (Wi y} widget floating 
lass Myapp ActionButton, FloatingActionButtonLocation floatingActionButtonLocation, FloatingActionBut 
@override tonAnimator floatingActionButtonAnimator, List<Widget> persistentFooterButtons, Widget dra 
Widget bui wer, Widget endDrawer, Widget bottomNavigationBar, Widget bottomSheet, Color backgroundCol 
return M or, bool resizeToAvoidBottomPadding, bool resizeToAvoidBottomInset, bool primary = true, D 
theme: ragStartBehavior drawerDragStartBehavior = DragStartBehavior.start, bool extendBody = fals 
prim @, Color drawerScrinColor, double drawerEdgeDragWidth}) 
人 这 package:flutter/src/material/scaffold dart 
), // Createsa visual scaffold for material design widgets. 
home: Scaffold( 
appBar: AppBar( 
title: Text(' 资 讯 标题 ')， 
), // AppBar 
body: NewsManager(), 
), // Scaffold 
); // MaterialApp 
} 


图 2.13 ”Scaffold 中 的 参数 body 


body 显示 在 appBar 的 下 面 , 它 也 需要 传递 一 个 小 部 件 。 在 body: 后 面 创建 一 个 
Flutter 的 小 部 件 , 也 可 以 是 自 定义 的 小 部 件 。 自 定义 的 小 部 件 会 形成 Flutter 附带 的 小 部 
件 树 ,但 最 终 也 会 递归 成 Flutter 附带 的 小 部 件 ,这 是 因为 只 有 Flutter 附带 的 小 部 件 才能 被 
转化 为 原生 的 UI 组件。 
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在 body 里 添加 一 个 Card 小 部 件 , 它 也 是 flutter/material 包 中 附带 的 。Card 中 的 内 容 
突出 显示 ,还 略 带 阴影 效果 。 同 样 它 也 需要 传递 一 些 参数 ,其 中 一 个 重要 的 参数 是 child， 
child 同样 也 需要 传递 一 个 小 部 件 。 传 递 的 小 部 件 就 是 显示 在 卡片 上 的 内 容 。 

我 们 在 卡片 上 加 图 片 和 图 片 下 面 的 标题 这 两 个 元 素 ,这 里 需要 传人 另外 一 个 小 部 件 , 它 
也 是 Flutter 附带 的 , 即 Column 小 部 件 。 它 同样 需要 传人 参数 ,其 中 一 个 参数 叫 children， 
和 child 不 同 ,child 只 需 传 一 个 小 部 件 ,children 需要 传人 多 个 小 部 件 并 上 下 排列 。 代 码 如 下 : 


// Chapter02/02 - 08/1ib/main. dart 


body: Card( // 创建 card 小 部 件 
child: Column( // 给 Card 中 的 参数 child 赋值 
children: <Widget >[],， // children 可 以 传人 多 个 小 部 件 


用 <> 括 起 来 的 写法 叫 泛 型 ,是 数组 的 一 个 附加 注解 ,使 我 们 更 清楚 地 知道 这 个 数组 只 
能 包含 小 部 件 。[] 括 起 来 的 是 数组 ,可 以 传 入 一 组 数据 而 不 仅仅 是 一 个 数据 , 例如 
Column、Card、AppBar、Text、Scaffold 等 。 这 里 可 以 添加 两 个 小 部 件 ,以 逗号 分 隔 。 一 个 是 
小 部 件 Image, 它 也 是 包 flutter/material 附带 的 ; 另 一 个 是 Text 小 部 件 ,并 传人 一 个 字符 
串 'newsl'。 代 码 如 下 : 


// chapter02/02 - 08/1ib/main. dart 


children: <Widget >[ 
Inage( ), // Image 小 部 件 
Text( 'news1') // 文本 Text 小 部 件 
] 


Image 需要 传人 一 张 图 片 ,在 项 目 中 创建 一 个 目录 ,命名 为 assets, 用 它 来 保存 静态 资 
源 。 我 们 可 以 任意 找 一 张 图 片 , 并 重 命名 为 newsl. jpg, 然 后 把 它 拖 放 到 assets 这 个 目录 
下 。 要 显示 这 张 图 片 ,把 它 放 到 这 个 目录 下 还 不 够 ,我 们 需要 在 pubspec. yaml 这 个 文件 中 
配置 访问 图 片 的 路 径 。 访 问 的 文件 是 assets 下 面 的 newsl.jpg, 如 图 2.14 所 示 。 

现在 就 可 以 在 项 目 中 使 用 这 张 图片 了 。 在 main. dart 中 ,可 以 使 用 Image 小 部 件 特别 
的 构造 器 来 创建 ,Image 小 部 件 和 括号 之 间 加 . asset, 代 码 如 下 : 


Image.asset('assets/newsl. jpg'), // Image 小 部 件 显示 图 片 


Image 将 加 载 已 经 配置 好 的 资源 ,参数 是 资源 的 路 径 , 类 型 是 String。 保 存 后 ,图 片 将 
会 被 加 载 到 App 上 ,如 图 2. 15 所 示 。 

图 片 和 图 片 下 面 的 标题 分 布 在 Card 上 面 ,占据 了 整个 Card 的 宽 和 高 ,可 以 看 到 底部 略 
带 阴 影 ,但 是 我 们 希望 构建 更 多 的 内 容 来 形成 小 部 件 树 。 接 下 来 我 们 学 习 更 多 的 核心 小 
部 件 。 
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# The following Yine ensures that the Material Icons font is 

# included with your application, so that you can use the icons in 
# the material Icons class. 

uses-material-design: true 


# To add assets to your application, add an assets section, like this: 
assets: 


# - images/a_dot_ham.jpeg 


图 2.14 配置 图 片 路 径 


图 2.15 图 片 在 App 上 显示 的 效果 


2.9 ”官方 文档 及 使 用 按钮 RaisedButton 


Flutter 官网 上 提供 了 很 多 内 容 , 用 浏览 器 访问 flutter. dev, 单 击 “Get FE 
started” 按 钮 ,如 图 2. 16 所 示 。 视频 讲 航 
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委 Flutter 


Design le apps 


2.16 Flutter 官网 
在 左 侧 找到 Widget catalog , 单 击 此 链接 ,如 图 2. 17 所 示 , 可 以 看 到 Flutter 自 带 的 所 有 
小 部 件 ,而 且 它们 被 分 类 了 。 


委 Flutter oa co yao 
Widget catalog 


图 2.17 Flutter 中 的 小 部 件 


最 重要 的 一 个 分 类 是 Basics 小 部 件 , 还 有 一 个 很 重 的 分 类 是 Material Components 小 
部 件 。Material Components 中 包含 AppBar 按钮 .输入 框 、 对 话 框 、Card 等 。Basics 小 部 
件 包含 行 、 列 .Container、Text、Image 小 部 件 ,可 以 单 击 小 部 件 上 的 链接 了 解 更 多 的 内 容 ， 
例如 小 部 件 的 构造 器 ,有 的 还 有 一 些 关于 小 部 件 的 示例 代码 。 这 些小 部 件 看 起 来 很 多 ,不 用 
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担心 ,我 们 将 在 本 书 中 使 用 大 量 的 小 部 件 ,一 切 都 会 变 得 更 加 清晰 。 
知道 怎么 找到 这 些小 部 件 了 ,现在 可 以 继续 丰富 App 的 功能 了 。 当 前 的 App 只 是 显 
示 了 Card, 它 占据 了 整个 空间 ,这 种 效果 并 不 是 我 们 想 要 的 。 现 在 修改 它 , 添 加 更 多 的 Card 
来 展示 一 列 Card。 
可 以 使 用 Column 小 部 件 , 并 给 参数 children 传 值 ,然后 把 Card 添加 到 数组 [中 ,代码 如 下 : 


// Chapter02/02 - 09/1ib/main. dart 


od Column( // 把 Card 放 到 列 中 
children: < Widget >[ // 赋值 children 参数 
Card( // Card 小 部 件 


child: Column( 
children: < Widget >[ 


Image.asset('assets/newsl. jpg'), // 显示 的 图 片 
Text( 'news1') // 显示 的 文字 


图 2.18 Card 显示 在 列 中 
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现在 可 以 加 更 多 的 Card 了 。 同 时 需要 在 Card 所 在 的 列 上 面 添加 一 个 按钮 ,可 以 添加 
RaisedButton 小 部 件 。 它 是 一 个 带 有 背景 的 按钮 .按钮 也 需要 配置 一 下 ,最 重要 的 一 个 参数 
是 child, 它 用 来 定义 这 个 按钮 内 部 显示 ,可 以 传人 Text 小 部 件 ,也 可 以 传人 一 个 图 标 。 这 
里 使 用 Text,Text 的 内 容 是 ' 添 加 资讯 '。 这 里 还 需要 传人 另外 一 个 参数 onPressed。 值 应 
该 是 一 个 方法 ,所 以 这 里 可 以 简单 定义 一 个 空 的 方法 ,这 个 叫 匿名 方法 ,没有 名 称 ,只 有 参数 
列表 和 方法 体 。 现 在 都 是 空 的 ,所 以 单 击 按钮 不 会 执行 任何 内 容 。 代 码 如 下 : 


// chapter02/02 - 09/1ib/main. dart 


children: <Widget >[ // 列 中 的 参数 children 


RaisedButton( // 带 背 景 的 按钮 
child: Text( ' 添 加 资讯 ')， // 按钮 上 的 文字 
onPressed: () {}, // 按钮 的 单 击 事件 

), 


Card( 


保存 并 重新 加 载 ,会 发 现 屏幕 顶部 有 一 个 按钮 可 以 单 击 , 但 没有 任何 反应 。 这 个 按钮 显 
示 得 并 不 美观 ,可 以 用 Container 小 部 件 把 它 包装 起 来 。Container 小 部 件 中 child 参数 的 值 
就 是 按钮 。Container 小 部 件 有 一 个 参数 叫 margin, 表示 Container 与 四 周 的 外 边 距 。 
margin 参数 可 以 使 用 flutter/material 包 中 的 类 EdgeInsets 来 赋值 ,这 个 类 可 以 使 用 . all 来 
调用 构造 器 ,传人 一 个 浮 点 类 型 来 定义 四 周边 界 的 距离 ,例如 10. 0 像素 。 代 码 如 下 : 


// Chapter02/02 - 09/1ib/main. dart 


Container( 
margin: EdgeInsets.all(10.0), // 按钮 四 周 的 外 边 距 为 10.0 像素 
child: RaisedButton( 


这 个 像素 会 自动 适 配 设 备 的 像素 ,现在 我 们 可 以 看 见 按钮 周围 产生 了 边 距 ,但 这 个 按钮 
没有 任何 功能 ,下 一 节 让 我 们 将 给 这 个 按钮 加 些 功能 ! 


2.10 创建 StatefulWidget 小 部 件 要 
Ws 
现在 单 击 应 用 中 的 按钮 没有 任何 反应 ,因为 监听 方法 是 空 的 ,这 个 按钮 国 碍 SE 
应 该 具有 添加 更 多 Card 小 部 件 的 功能 。 那 么 怎样 再 添加 更 多 的 Card 呢 ? ”视频 讲解 
还 有 个 问题 是 怎样 通过 单 击 按钮 来 添加 Card 小 部 件 呢 ? 
在 按钮 的 监听 方法 中 ,我 们 想 改变 一 些 数据 ,然后 动态 地 添加 到 卡片 的 列表 中 。 我 们 需 
要 管理 一 组 数据 ,例如 从 服务 器 获得 的 数据 ,后 边 的 章节 将 会 介绍 。 
首先 确认 build() 方 法 什么 时 候 被 调用 .build() 方 法 会 在 应 用 第 一 次 加 载 的 时 候 被 
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Flutter 调用 ,或 者 当 数据 发 生 改 变 的 时 候 也 会 被 调用 。 可 以 在 onPressed 监听 的 方法 中 管 
理 这 组 数据 ,每 次 单 击 按钮 时 都 要 改变 这 组 Card。StatelessWidget 满足 不 了 这 个 需求 , 因 
为 它 是 一 个 很 简单 的 小 部 件 ,StatelessWidget 可 以 接收 外 部 的 数据 ,然后 简单 地 调用 build() 
方法 ,构建 一 个 小 部 件 树 , 它 没 办 法 管理 内 部 数据 。 如 果 内 部 数据 发 生变 化 ,也 不 能 重新 调 
用 build() 方 法 ,因为 StatelessWidget 不 能 管理 内 部 数据 。StatelessWidget 只 能 在 第 一 次 
被 创建 的 时 候 调 用 build() 方 法 ,或 者 是 接收 到 某 些 外 部 数据 发 生变 化 时 , 它 会 调用 build() 
方法 ,所 以 现在 不 能 使 用 StatelessWidget。 我 们 需要 使 用 StatefulWidget, State 可 以 被 简 
单 地 理解 为 数据 ,可 以 使 用 存储 在 小 部 件 中 的 数据 ,同时 也 可 以 改变 这 些 数据 。 当 我 们 改 成 
StatefulWidget 后 会 有 一 个 错误 提示 ,显示 缺少 方法 createState() ,如 图 2. 19 所 示 。 


main.dart @@ 


b > 会 main.d: Myapp 


1 import package:flutter news/main.dart 


Missing concrete implementation of| StatefulWidget.createState. 
Try impLementing the missing method，or make the cLass 
abstract. dart(non_abstract_cLass_inherits_abstract_member_one) 


import 


void m 


class Myapp extends StatefulWidget { 


图 2.19 缺少 方法 createState() 


createState() 方 法 是 必须 要 创建 的 ,现在 我 们 把 这 个 类 用 大 括号 结束 ,代码 如 下 : 


class Myapp extends StatefulWidget { // 使 用 有 状态 的 小 部 件 
} 


在 Myapp 类 中 输入 createState() 方 法 ,Visual Studio Code 会 给 提示 , 单 击 回 车 键 , 代 
码 如 下 : 


// chapter02/02 - 10/1ib/main. dart 


@override 
State < StatefulWidget > createState() { // 创建 一 个 状态 对 象 

// TODO: implement createState 

return null; // 返回 一 个 有 状态 的 小 部 件 
} 


createState() 方 法 返回 一 个 有 状态 的 小 部 件 对 象 ,<> 是 泛 型 , State 这 个 类 是 属于 
flutter/material 包 。 这 个 状态 对 象 应 该 属于 Myapp。 实 际 上 需要 创建 两 个 类 来 一 起 工作 ， 
createState() 方 法 需要 返回 一 个 新 的 State 对 象 , 然 后 把 这 个 对 象 配 置 给 Myapp。 还 需要 创 
建 第 二 个 类 ,可 以 写成 _ MyappState, 类 名 中 的 下 画 线 是 一 种 约定 ,表示 它 不 能 被 其 他 文件 
使 用 ,只 能 在 这 个 文件 中 使 用 。 后 面 的 内 容 可 能 会 使 用 多 个 文件 ,可 以 把 Myapp 引入 到 文 
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件 中 并 使 用 它 , 但 是 不 可 以 使 用 _MyappState, 然 后 输入 extends, 因 为 State 这 个 对 象 是 属 
于 Flutter 的 ,需要 覆盖 build() 方 法 ,这 是 因为 State 这 个 类 中 也 有 build() 方 法 。 现 在 我 们 
只 需要 告诉 Flutter, 这 个 状态 类 是 属于 Myapp 这 个 小 部 件 的 ,需要 在 <> 中 加 上 Myapp, 表 
明 这 个 State 属于 谁 ,这 样 这 两 个 类 的 关系 就 创建 起 来 了 。Myapp 需要 返回 _MyappState 
对 象 ,所 以 把 _MyappState() 返 回 。 代 码 如 下 : 


// Chapter02/02 - 10/1ib/main. dart 


class Myapp extends StatefulWidget { // 有 状态 的 小 部 件 Myapp 
@override 
State < StatefulWidget > createState() { // 创建 状态 方法 
return _MyappState( ); // 返回 状态 对 象 


} 
} 


class _MYappState extends State < Myapp >{ // 创建 状态 类 
@override 
Widget build(BuildContext context) { // 覆盖 build() 方 法 
return null; 
} 
} 


类 Myapp 创建 了 一 个 State 对 象 ,这 个 对 象 包含 build() 方 法 ,Flutter 内 部 会 调用 build() 
方法 ,这 就 是 StatefulWidget 的 使 用 方法 。 那 么 怎么 去 使 用 StatefulWidget 改变 这 组 Card 
呢 ? 下 一 节 我 们 将 详细 讲解 。 


2.11 在 StatefulWidget 中 管理 数据 


我 们 已 经 创建 了 一 个 StatefulWidget 小 部 件 , 但 问题 是 怎样 去 管理 和 Ee i 
改变 它 内 部 的 数据 ,可 以 用 一 个 很 简单 的 方式 去 实现 它 。 在 _MyappState ”视频 讲解 


中 添加 一 个 属性 news, 代 码 如 下 : 

List < String> news = []; // 字符 串 类 型 的 数组 

news 是 一 个 String 类 型 的 数组 ,因为 Dart 是 强 类 型 语言 ,所 以 需要 在 news 的 前 面 加 
类 型 List, 这 是 Dart 中 的 类 型 ,表示 数组 。List 可 以 添加 泛 型 ,这 里 是 String 泛 型 ,表示 这 
个 数组 中 的 内 容 都 是 String 类 型 的 ,这 就 是 _MyappState 的 属性 。 但 数组 是 空 的 ,下 面 我 们 
给 数组 赋值 ,在 中 括号 中 输入 第 一 条 资讯 first' ,代码 如 下 : 

List <String> news = ['first']; // 给 数组 添加 一 条 资讯 

现在 需要 把 数组 转换 到 Card 列表 中 并 泻 染 到 屏幕 上 ,使 用 属性 时 不 可 以 使 用 this, 可 
以 直接 引用 它 。 

这 里 需要 调用 数组 的 一 个 方法 ,在 news 后 加 点 ,有 一 个 叫 map() 的 方法 , 它 允 许 将 列 


第 2 章 “深入 理解 Flutter 基 础 知识 和 小 部 件 概念 | 其 39 


表 中 的 每 一 个 元 素 转换 为 新 元 素 并 将 其 返回 。 

我 们 将 在 Column 中 的 children 参数 列表 返回 一 个 新 值 ,map 中 需要 传人 一 个 方法 参 
数 来 编写 转化 逻辑 ,方法 将 接收 一 个 元 素 , 这 里 你 可 以 使 用 等 号 加 箭头 来 定义 每 个 元 素 都 发 
生 了 什么 ,代码 如 下 : 


// Chapter02/02 - 11/lib/main. dart 


@override 
Widget build(BuildContext context) { //_MyappState 类 中 的 build() 方 法 
return Column( // 返回 的 列 
children: news 
.map( // 调用 数组 的 map( ) 方 法 转化 
(element) = > Card( // 遍历 news 中 的 数据 转化 成 Card 
child: Column( // Card 中 的 列表 
children: <Widget >[ 
Image,asset('assets/newsl. jpg'), // Card 中 的 图 片 
Text(element) // 图 片 下 面 的 标题 
J], 
), 
), 
) 
.toList(), // 遍历 后 转化 成 列表 


) 

} 

我 们 需要 根据 元 素 创建 Card, 所 以 遍历 news 中 的 每 一 个 元 素 ,然后 把 它 转 化 成 Card。 
把 Text 小 部 件 中 的 内 容 直 接替 换 成 被 遍历 的 元 素 , 因 为 它们 都 是 String 类 型 的 数据 。 

有 一 点 需要 注意 ,需要 把 被 遍历 的 元 素 element 用 小 括号 括 起 来 ,因为 它 是 一 个 参数 ， 
因为 只 有 一 句 代码 ,所 以 我 们 可 以 用 二 > 这 种 方式 编写 。 虽 然 跨越 了 几 行 代码 也 是 一 句 代 
码 。map() 方 法 遍历 后 返回 的 是 一 个 Iterable 类 型 的 数据 ,但 是 Column 需要 的 是 小 部 件数 
组 ,所 以 需要 把 map() 方 法 遍历 后 的 结果 转化 成 List 类 型 ,我们 可 以 通过 调用 tolist() 方 法 
来 实现 。 下 一 节 我 们 将 学 习 使 用 按钮 添加 更 多 的 Card。 


2.12 在 StatefulWidget 小 部 件 中 添加 数据 


触发 按钮 的 单 击 事件 能 做 一 些 事情 ,这 里 单 击 按钮 需要 改变 news 这 个 
列表 数据 。 当 数据 发 生变 化 时 ,build( ) 方 法 将 会 再 次 被 执行 ,此 时 它 将 使 。 视频 讲解 
用 的 是 更 新 后 的 news 数组 列表 ,进而 更 新 Card 并 这 染 到 屏幕 上 。 

理论 上 ,如 果 增 加 news 数组 列表 中 的 数据 ,将 会 获得 更 多 的 Card, 所 以 在 按钮 单 击 事 
件 这 里 可 以 给 news 数组 列表 添加 新 的 值 。 因 为 news 数组 列表 是 一 个 字符 串 列表 ,所 以 可 
以 添加 一 个 新 的 字符 串 'second' ,代码 如 下 : 


// chapter02/02 - 12/1ib/main. dart 
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RaisedButton( 
child: Text( ' 添 加 资讯 ')， 
onPressed: () { 


news. add( 'second'); // 单 击 按钮 后 给 news 数组 添加 数据 
}, 
), 
保存 后 , 单 击 按钮 却 什么 都 没有 发 生 。 实 际 上 我 们 改变 了 news, 可 以 在 这 里 打印 出 来 ， 
代码 如 下 : 


// Chapter02/02 - 12/1ib/main. dart 
onPressed: () { 
news. add( 'second'); // 添加 一 条 资讯 
print (news); // 打印 news 列表 


这 只 是 一 个 debug 方法 ,Visual Studio Code 在 底部 的 控制 台 会 打印 出 日 志 , 单 击 按钮 ， 
控制 台 已 经 打印 出 来 first 和 second 了 ,如 图 2. 20 所 示 。 
PROBLEMS OUTPUT DEBUG CONSOLE TERMINAL 


Reload already in progress, ignoring request 
Restarted application in 4,357ms. 


flutter: [first, second] 


图 2.20 打印 news 数组 


但 是 我 们 只 看 见 一 个 Card, 这 是 因为 我 们 在 这 里 改变 了 数据 ,但 是 Flutter 识别 不 出 
来 ,默认 Flutter 只 关注 属性 这 里 的 数据 , 当 属 性 数据 发 生变 化 时 ,必须 告诉 Flutter 在 
StatefulWidget 中 已 改变 了 属性 数据 。 

要 实现 这 样 的 效果 需要 调用 一 个 特殊 的 方法 setState(), 它 是 Flutter 包 提供 的 ,需要 
接收 一 个 方法 参数 ,在 这 个 方法 中 编写 改变 数据 的 方法 ,然后 重新 泻 染 App。 这 里 添加 
news 的 数据 ,代码 如 下 : 


// Chapter02/02 - 12/1ib/main. dart 
onPressed: () { 


setState(() { // 调用 setState() 告 诉 Flutter 已 改变 了 属性 数据 
news. add( 'second'); // 添加 一 条 资讯 

D); 

print (news); // 打印 news 数组 中 的 内 容 
} 


保存 一 下 , 单 击 按钮 会 看 到 第 二 个 卡片 出 现 了 。 
下 一 节 我 们 再 创建 一 个 StatelessWidget, 看 看 小 部 件 之 间 如 何 交互 。 
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2.13 把 小 部 件 拆 分 到 单独 的 文件 中 


我 们 已 经 学 习 了 很 多 基础 的 小 部 件 ,那么 怎样 建立 小 部 件 之 间 的 联系 
呢 ? 在 编写 Flutter 应 用 的 过 程 中 ,需要 经 常 做 的 一 件 事 就 是 拆 分 代码 并 封 
装 。 不 可 以 把 所 有 的 代码 都 放 在 一 个 根 的 小 部 件 中 ,就 像 Myapp 这 个 
StatefulWidget 小 部 件 一 样 。 我 们 可 以 把 应 用 拆 分 成 多 个 细 粒 度 的 小 部 件 ,并 把 它们 分 发 
到 多 个 文件 中 ,这 样 可 以 使 每 个 小 部 件 和 文件 都 易 读 ,也 容易 维护 。 怎 样 拆 分 呢 ? 

我 们 使 用 StatefulWidget 来 管理 Card 小 部 件 和 news 数组 ,如 果 仔 细 观 察 可 以 看 到 
StatefulWidget 是 从 这 个 列 小 部 件 开始 演 染 Card 的 ,其 他 的 小 部 件 如 MaterialApp、 
Scaffold、AppBar 还 有 RaisedButton ,它们 都 不 会 改变 。RaisedButton 按钮 是 触发 改变 状态 
的 部 分 ,但 也 可 以 把 这 个 按钮 拆 分 出 来 。 

首先 我 们 把 Card 列表 拆 分 出 来 。 创 建 一 个 新 的 文件 ,命名 为 news. dart, 可 以 随意 命 
名 ,但 按照 惯例 文件 名 全 部 小 写 , 如 果 有 多 个 单词 的 话 , 用 下 夯 线 分 隔 。 文 件 格式 是 dart。 
在 这 个 文件 中 演 染 资讯 列表 ,可 以 把 Card 列表 所 在 的 列 小 部 件 复 制 到 news. dart 文件 中 。 
在 news. dart 文件 中 创建 一 个 类 News。 现 在 需要 扩展 来 自 Flutter 中 的 类 ,我 们 需要 在 每 
一 个 文件 中 添加 import ,代码 如 下 所 示 : 


import 'package:flutter/material. dart'; // 引 入 material 包 


因为 每 一 个 文件 都 是 独立 的 。 在 main. dart 中 引入 的 material 包 不 会 在 这 里 生效 ,所 
以 这 里 需要 引入 flutter/material 包 , 然 后 创建 一 个 小 部 件 ,并 复制 Column 的 逻辑 放 到 这 个 
小 部 件 中 ,现在 的 问题 是 这 里 需要 继承 一 个 有 状态 的 小 部 件 还 是 无 状态 的 小 部 件 呢 ? 两 种 
方式 都 可 以 ,但 最 好 在 这 里 使 用 无 状态 的 小 部 件 ,这 列 Card 是 需要 改变 的 ,为 什么 使 用 无 状 
态 的 小 部 件 呢 ? 因为 数据 的 变化 实际 上 是 发 生 在 其 他 的 地 方 。News 小 部 件 接收 一 组 news 
数据 ,这 组 news 数据 可 能 被 改变 ,但 是 它 是 在 我 们 创建 的 News 小 部 件 之 外 被 改变 的 。 在 
News 小 部 件 中 添加 一 个 build() 方 法 ,使 用 Visual Studio Code 的 提示 创建 ,代码 如 下 : 


// Chapter02/02 - 13/1ib/news. dart 


class News extends StatelessWidget { // 无 状态 小 部 件 
@override 
Widget build(BuildContext context) { // 创建 build() 方 法 
// TODO: implement build 
return null; // build() 方 法 的 返回 值 


} 
} 


把 复制 Column 的 逻辑 放 到 return 后 面 ,代码 如 下 : 


// Chapter02/02 - 13/1ib/news. dart 
@override 
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Widget build(BuildContext context) { // News 类 中 的 build 方 法 
return Column( // 返回 的 列 
children: news 
.map( // 调用 数组 的 map 方法 转化 
(element) => Card( // 遍历 news 中 的 数据 转化 成 Card 
child: Column( // Card 中 的 列表 
children: <Widget >[ 
Image.asset( 'assets/newsl1. jpg'), // Card 中 的 图 片 
Text (element) // 图 片 下 面 的 标题 
J, 
), 
), 
) 
.toList(), // 遍历 后 转化 成 列表 


); 

} 

IDE 提示 这 个 news 不 存在 ,怎样 把 news 数组 传 到 News 这 个 小 部 件 中 呢 ? 可 以 从 外 
部 传人 数据 ,然后 就 可 以 在 News 小 部 件 中 使 用 传人 的 数据 了 。 我 们 可 以 通过 构造 器 来 实 
现 ,创建 一 个 构造 器 ,输入 类 名 ,小 括号 ,大 括号 ,代码 如 下 : 

News(){} // News 小 部 件 的 构造 器 

构造 器 在 小 部 件 创建 的 时 候 就 会 被 调用 ,构造 器 还 有 其 他 的 特性 ,现在 用 到 的 一 个 特性 
是 接收 数据 news 数组 ,再 可 以 给 构造 器 命名 一 个 参数 news ,参数 名 可 以 任意 命名 ,然后 把 
传 进来 的 news 存储 到 News 类 的 属性 中 ,所 以 需要 在 类 中 添加 一 个 属性 ,代码 如 下 : 


class News extends StatelessWidget { // News 无 状态 小 部 件 
List < String> news; // 添加 news 属性 


news 属性 的 类 型 是 字符 串 型 的 数组 , 它 不 能 改变 ,也 没有 初始 化 。 现 在 把 构造 器 中 的 
news 存储 到 这 个 属性 news 当中 。Dart 语言 提供 了 一 个 方便 的 快捷 方式 ,在 这 里 输入 this. 
news, 会 自动 获取 传人 的 参数 ,并 将 其 存储 在 具有 相同 名 称 的 属性 中 ,这 里 需要 在 构造 器 后 


面 加 分 号 ,代码 如 下 : 
// Chapter02/02 - 13/1ib/news. dart 
class News extends StatelessWidget { // News 无 状态 小 部 件 
List < String> news; // 添加 news 属性 
News(this. news); // News 的 构造 器 


这 样 就 可 以 通过 构造 器 将 数据 传递 到 属性 中 了 。 类 News 下 面 有 一 个 波浪 线 ,提示 类 
中 的 所 有 内 容 都 是 不 可 变 的 ,如 图 2. 21 所 示 。 
因为 创建 的 是 StatelessWidget, 无 论 怎 样 它 都 不 能 对 变化 做 出 反应 ,所 以 必须 标注 属 
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Widg |This class (or a class which this class inherits from) is marked "@immutable', but one 
lor more of its instance fields are not final: News,news dartfmust be immutable) 
re 
No quick fixes available 


children: news 


2.21 类 News 的 提示 信息 


性 不 可 以 改变 ,在 属性 前 面 加 一 个 特殊 的 关键 字 final, 代 码 如 下 : 

final List < String > news; // 属性 不 能 改变 

这 是 Dart 的 一 个 特性 , 它 告 诉 Flutter 属性 news 将 永远 不 会 改变 。 从 构造 器 获得 的 值 
初始 化 后 属性 news 将 永远 不 会 改变 。 也 可 以 不 加 这 个 final, 加 上 它 是 为 了 更 清楚 这 是 一 
个 仅 从 外 部 设置 的 值 ,如 果 有 新 的 值 从 外 部 传 进来 , 它 只 是 简单 地 替换 之 前 的 值 ,只 是 替换 ， 
不 会 改变 ,然后 再 使 用 替换 的 这 个 值 调用 build() 方 法 。 


2.14 使 用 自 定义 小 部 件 


在 main. dart 文件 中 ,已 经 删除 了 泻 染 Card 的 代码 ,再 删除 Container 国 t 了 
中 的 按钮 ,并 将 其 放 入 到 自己 创建 的 小 部 件 中 。 创 建 一 个 新 的 文件 视频 讲解 
news_manager. dart, 用 它 管 理 News 小 部 件 。 首 先 引 入 flutter/material 
包 , 创 建 类 NewsManager 继承 StatefulWidget, 因 为 在 NewsManager 中 需要 管理 news 数 
据 。StatefulWidget 需要 创建 createState() 方 法 ,我 们 可 以 通过 IDE 的 提示 来 创建 ,同时 需 
要 添加 第 二 类 _ NewsManagerState 继承 State, 泛 型 连接 到 NewsManager, 并 且 在 
_NewsManagerState 中 需要 创建 build() 方 法 ,在 build() 方 法 中 需要 返回 的 是 按钮 和 Card 
列表 。 代 码 如 下 : 


// chapter02/02 - 14/1ib/news_manager. dart 


import 'package:flutter/material. dart'; // 引入 material 包 
class NewsManager extends StatefulWidget {  // 有 状态 小 部 件 
@override 
State < StatefulWidget > createState() { // 创建 createState 
return _NewsManagerState( ); // 返回 状态 类 
} 
} 
class _NewsManagerState extends State < NewsManager > { 
List <String> news = ['first']; // news 资讯 数据 
@override 
Widget build(BuildContext context) { // 创建 build() 方 法 


return Container( // 给 按钮 加 边 距 
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margin: EdgeInsets.all(10.0), 
child: RaisedButton( 
child: Text( ' 添 加 资讯 ')， 
onPressed: () { 
news. add( 'second'); 
}, 
), 
); 
} 
} 


// 外 边 距 为 10.0 像素 
// 按钮 小 部 件 

// 按钮 上 的 文字 

// 按钮 的 单 击 事件 
// 添加 news 数据 


现在 缺少 News 小 部 件 ,需要 在 按钮 下 面 显 示 News 小 部 件 。 所 以 build() 方 法 需要 返 
回 一 个 Column, 并 给 参数 children 赋值 ,其 中 一 个 是 包装 按钮 的 小 部 件 Container, 另 一 个 
是 在 2. 13 节 中 的 News 小 部 件 。 现 在 不 可 用 ,因为 还 没有 引入 ,引入 News 小 部 件 的 代码 


如 下 : 


import '. /news. dart'; 


// 引 入 News 小 部 件 


点 代表 当前 目录 ,点 点 代表 上 一 级 目录 ,这 里 只 是 在 当前 目录 ,所 以 使 用 . /news. dart。 
下 面 就 可 以 使 用 News 小 部 件 了 ,News 需要 传人 一 个 参数 ,所 以 把 news 数组 传人 。 代 码 


如 下 : 


// Chapter02/02 - 14/1ib/news_manager. dart 
@override 
Widget build(BuildContext context) { 
return Column( 
children: < Widget >[ 
Container( 
margin: EdgeInsets.all(10.0), 
child: RaisedButton( 
child: Text( ' 添 加 资讯 ')， 
onPressed: () { 
setState(() { 
news. add( 'second'); 
}); 
}, 
), 
), 
News(news) 
]， 
) 
} 


// 创建 build() 方 法 

// 创建 列 小 部 件 

// 列 小 部 件 中 的 数组 

// 按钮 容器 

// 按钮 的 外 边 距 为 10.0 像素 
// 按钮 小 部 件 

// 按钮 上 的 文字 

// 按钮 的 单 击 事件 

// 单 击 按钮 改变 状态 

// 给 news 数据 添加 数据 


// 创建 News 小 部 件 


通过 setState 改变 news 数据 ,并 再 次 调用 build() 方 法 泻 染 ,同时 也 会 演 染 这 里 的 
News 小 部 件 , 它 被 传人 了 更 新 后 的 news 数组 列表 ,这 将 导致 在 News 小 部 件 中 再 次 调用 
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build() 方 法 ,这 就 是 我 们 的 NewsManager 小 部 件 。 

下 面 在 main. dart 文件 中 使 用 NewsManager 小 部 件 。 在 main. dart 中 我 们 不 需要 处 
理 任 何 状态 ,所 以 可 以 把 StatefulWidget 改 成 StatelessWidget ,删除 createState() 方 法 ,只 
需要 覆盖 build() 方 法 ,body 中 不 再 是 一 个 Column ,而 是 NewsManager 小 部 件 , 所 以 引入 
news_manager. dart ,代码 如 下 : 

import '. /news_manager. dart'7 // 引入 文件 ,使 用 NewsManager 小 部 件 

创建 一 个 NewsManager 小 部 件 对 象 ,代码 如 下 : 


// chapter02/02 - 14/1ib/main. dart 


class Myapp extends StatelessWidget { // 继承 StatelessWidget 
@override 
Widget build(BuildContext context) { // 创建 build() 方 法 
return MaterialApp( // MaterialApp 跟 小 部 件 
home: Scaffold( // Scaffold 页 面 
appBar: AppBar( // appBar 小 部 件 
title: Text( ' 资 讯 标题 ')， // 页 面 上 的 标题 
), 
body: NewsManager(), // 创建 NewsManager 小 部 件 


现在 应 用 代码 的 结构 更 清晰 ,包含 多 个 文件 ,多 个 小 部 件 ,并 且 小 部 件 可 以 复 用 ,也 使 代 
码 更 容易 管理 ,因为 每 一 个 文件 的 内 容 都 不 多 ,而 且 容 易 理 解 。 
国 窑 


2.15 给 StatefulWidget 传递 参数 
Es 

StatelessWidget 怎样 从 外 部 接收 数据 呢 ? 在 NewsManager 小 部 件 回 出 本 
中 ,数组 中 的 first 使 用 的 是 硬 编码 。 现 在 我 们 想 从 外 部 获得 NewsManager ”视频 讲解 
的 初始 化 数据 ,可 以 在 main. dart 中 给 NewsManager 小 部 件 传 数据 。 可 以 
像 News 小 部 件 那样 通过 参数 传递 数据 ,然后 通过 构造 器 方法 接收 数据 。 在 NewsManager 
中 也 可 以 这 样 做 。 在 NewsManager 添加 构造 器 、 类 名 括号 ,代码 如 下 : 

// Chapter02/02 - 15/1ib/news_manager. dart 

class NewsManager extends StatefulWidget { 

final String startingNews; // 接收 外 部 参数 的 属性 

NewsManager (this. startingNews) ; // 创建 构造 器 

构造 器 现在 可 以 接收 一 个 参数 startingNews, 同 样 使 用 了 this 加 点 这 种 快捷 方式 来 赋 
值 。 加 上 final 表示 startingNews 是 从 外 部 获取 的 ,改变 startingNews 的 唯一 办 法 是 在 它 


46 大 | Flutter 实 战 指南 


的 父 级 小 部 件 中 重新 创建 NewsManager 小 部 件 , 这 个 过 程 会 传人 一 个 新 值 给 startingNews, 然 
后 NewsManager 的 属性 会 重新 被 赋值 。 

现在 的 问题 是 如 何 使 用 startingNews, 我 们 在 NewsManager 中 获取 到 这 个 值 了 ,但 是 
需要 在 _NewsManagerState 中 使 用 它 。 现 在 你 可 能 会 有 一 个 想法 ,通过 构造 器 把 这 个 值 传 
人 到 _NewsManagerState 中 ,然后 保存 。 这 样 做 没 问 题 ,但 是 非常 麻烦 ,这 不 是 一 个 好 方 
法 。Flutter 提供 了 一 个 非常 有 用 的 关键 字 widget, 它 允许 你 访问 这 个 状态 对 应 的 小 部 件 中 
的 所 有 属性 。 因 为 之 前 了 解 到 NewsManager 和 _NewsManagerState 是 连接 在 一 起 的 。 
Flutter 为 我 们 做 了 一 些 幕 后 工作 ,通过 关键 字 widget 可 以 访问 连接 的 小 部 件 的 属性 ,例如 
这 里 的 NewsManager 类 中 的 startingNews。 

注意 不 可 以 在 类 中 初始 化 属性 ,只 能 在 _NewsManagerState 类 的 方法 中 使 用 widget 获 
取 NewsManager 的 属性 。Flutter 中 的 State 类 允许 实现 一 些 特别 的 方法 ,例如 initState() 
方法 ,输入 initState 时 IDE 会 有 提示 。initState() 是 一 个 覆盖 的 方法 。 代 码 如 下 : 


// chapter02/02 - 15/1ib/news_manager. dart 


@override 

void initState() { // 覆盖 State 中 的 initState( ) 方 法 
news. add(widget. startingNews) ; // 在 initState() 方 法 中 使 用 widget 
super. initState( ); // 调用 父 类 State 中 的 initState() 


} 


super 代表 扩展 的 基 类 ,这 里 代表 State 类 , super. 
initState() ;这 样 写 保证 在 基 类 中 initState( ) 方 法 会 被 调 
用 ,所 以 不 可 以 删除 它 。State 类 创建 的 时 候 会 调用 
initState() 初 始 化 方法 。 可 以 认为 是 在 NewsManager 小 
部 件 第 一 次 显示 在 屏幕 上 时 initState() 方 法 被 调用 ,所 以 
这 里 可 以 使 用 news. add(widget. startingNews); 表示 使 
用 了 NewsManager 中 的 startingNews 了 ,并 把 它 添加 到 
news 数组 中 。 因 为 initState() 方 法 在 _NewsManagerState 创 
建 时 被 执行 ,所 以 在 第 一 次 运行 _NewsManagerState 中 的 
build() 方 法 时 ,初始 化 方法 initState 〇 已 经 被 执行 了 。 

在 main. dart 文件 中 给 NewsManager 传递 值 ,例如 
first, 代 码 如 下 : 


body: NewsManager('first'),// 创 建 NewsManager 并 传 值 first 


保存 ,重启 会 发 现 first 这 条 资讯 显示 到 模拟 器 上 了 ， 
这 意味 着 逻辑 生效 了 ,如 图 2. 22 所 示 。 


图 2.22 模拟 器 显示 结果 
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SO | 


2.16 深入 学 习 生 命 周 期 


这 节 我 们 学 习 生 命 周 期 ,首先 有 两 种 不 同 的 小 部 件 , 分 别 是 国 业 的 
StatelessWidget 和 StatefulWidget。StatelessWidget 是 无 状态 小 部 件 ,可 视频 讲解 
以 在 UI 上 泻 染 内 容 , 也 可 以 给 它 传 数据 。 在 App 中 News 是 无 状态 小 部 
件 。 我 们 通过 NewsManager 小 部 件 给 News 传人 数据 并 让 它 发 生 改 变 , 然 后 泻 染 到 屏 
区 上 上 ， 

StatefulWidget 是 有 状态 的 小 部 件 ,可 以 用 它 泻 染 UI、 从 外 部 接收 数据 ,同时 还 可 以 改 
变 小 部 件 中 的 内 部 数据 ,然后 重新 泻 染 。 所 以 改变 外 部 传人 的 数据 和 改变 内 部 的 状态 数据 
都 可 以 重新 泻 染 UI, 如 图 2. 23 所 示 。 


we [| 


接收 data data 能 从 外 部 改变 


data 能 从 外 部 改变 
| 
Widget 
Py 
当 接收 到 的 data 变 化 时 ， 当 接收 到 的 data 变 化 
注 染 UI | 重新 泻 染 或 本 地 状态 改变 时 ， 
重新 泻 染 


2.23 有 状态 小 部 件 和 无 状态 小 部 件 的 重新 泻 染 方式 对 比 


小 部 件 有 生命 周期 ,StatelessWidget 和 StatefulWidget 生命 周期 不 同 。 生 命 周 期 代表 
Flutter 执行 小 部 件 类 中 的 方法 的 过 程 。StatelessWidget 有 构造 器 方法 和 build() 方 法 ,这 
两 个 方法 只 有 StatelessWidget 在 生命 的 周期 中 时 才 会 被 调用 。 当 外 部 的 数据 变化 时 ， 
build() 方 法 被 再 次 执行 。 

Stateful Widget 同样 也 有 构造 器 方法 ,在 调用 build() 方 法 之 前 调用 initState() 方 法 ， 
initState() 方 法 只 调 一 次 。 同 时 可 以 在 build() 方 法 中 调用 setState() 方 法 ,确切 地 说 是 当 
某 些 事情 发 生变 化 的 时 候 会 调用 它 , 例 如 单 击 按钮 等 。 

当 传 给 StatefulWidget 的 外 部 数据 发 生变 化 时 ,会 调用 didUpdateWidget( ) 方 法 。 
例如 在 上 一 节 中 ,如 果 传 入 的 startingNews 发 生 了 改变 , 先 调 用 了 didUpdateWidget() 方 
法 ,再 调用 了 build() 方 法 ,由 此 可 见 StatefulWidget 的 生命 周期 比较 复杂 ,如 图 2. 24 
所 示 。 
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构造 器 方法 构造 器 方法 
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initState() 


> 
build) 
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setState() 


build() 


didUpdateWidget() 
I 
build0) 


2. 24 小 部 件 的 生命 周期 


2.17 深入 学 习 Google 的 Material Design 设计 体系 


小 部 件 使 用 了 Material Design 设计 体系 ,Material Design 看 起 来 如 
图 2. 25 所 示 。 

谷歌 的 手机 应 用 和 Web 应 用 经 常 使 用 Material Design, 它 是 由 谷歌 开 
发 的 ,可 以 被 自 定义 ,如 改变 它 的 颜色 等 。Material Design 在 iOS 上 表现 也 
很 好 。 


Page title 


图 2.25 Material Design 


第 1 章 我 们 提 到 过 Material Design 已 经 植 人 到 Flutter 中 了 ,所 以 可 以 直接 使 用 
Material Design 来 设计 。 可 以 拿 来 即 用 ,不 需要 任何 设计 工作 。 我 们 可 以 调节 主题 ,在 
main. dat 文件 中 给 MaterialApp 添加 参数 theme,theme 的 参数 值 为 ThemeData 对 象 ， 
ThemeData 也 是 来 自 flutter/material 包 ,ThemeData 需要 传人 一 组 颜色 或 样式 的 数据 , 代 
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码 如 下 : 


// Chapter02/02 - 17/1ib/main. dart 
return MaterialApp( 
theme: ThemeData( 


primaryColor: Colors. deepOrange, // 定义 主题 颜色 
accentColor: Colors. deepOrange, // 定义 访问 演示 
brightness: Brightness. light, // 定义 应 用 主题 


), 


Colors 定 义 颜 色 ,颜色 是 一 组 静态 变量 ,可 以 通过 加 点 来 调用 ,例如 Colors. 
deepOrange。 保 存 一 下 ,在 模拟 器 中 会 发 现 标题 栏 的 颜色 发 生 了 变化 。 

如 果 通 过 主题 设置 按钮 的 颜色 ,可 以 在 NewsManager 中 设置 按钮 的 color 属性 ,代码 
如 下 : 


// Chapter02/02 - 17/1ib/news_manager. dart 


child: RaisedButton( // 添加 资讯 Card 的 按钮 


color: Theme. of (context). primaryColor, // 用 主题 设置 按钮 的 颜色 
child: Text(' 添 加 资讯 ')， // 按钮 上 的 文字 


Flutter 提供 一 个 特殊 对 象 Theme, 可 调用 of() 方 法 ,并 传递 一 个 context 参数 ,context 
中 保存 着 元 数据 信息 ,例如 我 们 App 的 主题 ,然后 调用 primaryColor, 保存 后 ,按钮 变 成 了 
橙色 。 


2.18 Dart 语言 特性 及 位 置 参 数 与 可 选 参数 


颜色 ,进入 Colors 这 个 类 的 文件 中 ,可 以 看 到 静态 变量 是 如 何 定义 的 ,代码 。 视频 讲解 
如 下 : 


static const MaterialColordeepOrange = MaterialColor( // 静 态 变 量 


const 表示 这 个 值 不 可 以 改变 ,这 样 不 需要 用 构造 器 就 可 调用 它们 。 

现在 学 习 命名 参数 ,在 之 前 的 构造 器 中 ,我 们 只 使 用 了 位 置 参数 ,例如 NewsManager 
构造 器 中 的 this. startingNews 是 位 置 参数 ,因为 它 是 第 一 个 被 传人 的 值 。 如 果 只 需 使 用 一 
两 个 参数 ,位 置 参 数 就 足够 用 了 。 如 果 需 要 使 用 很 多 参数 ,并 且 和 希望 按 名 字 定 位 它们 ,或 者 
不 想 为 其 中 的 某 些 参数 赋值 ,可 以 在 构造 器 的 参数 这 里 加 上 大 括号 ,代码 如 下 : 


NewsManager({this. startingNews} ); // 命 名 参数 
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这 就 是 一 个 命名 参数 。 现 在 可 以 给 这 个 目标 传人 一 个 值 ,输入 startingNews: 代码 
如 下 : 


body: NewsManager(startingNews: 'first',)， // 使 用 命名 参数 

这 样 就 定位 到 了 名 字 叫 startingNews 的 参数 ,因为 这 里 选择 了 名 字 , 然 后 把 值 传 给 了 
它 。 我 们 也 可 以 通过 构造 器 设置 一 个 默认 的 值 ,代码 如 下 : 

NewsManager( {this. startingNews = 'third'} );// 命 名 参数 设置 了 默认 值 


这 样 可 以 省 略 传 值 。 我 们 也 可 以 给 位 置 参 数 设 置 一 些 可 选 参数 ,例如 在 News 小 部 件 
中 ,以 一 个 空 的 数组 开始 ,代码 如 下 : 


News([this.news = const []]){ // 可 选 参 数 , 并 赋值 
} 


中 括号 表示 参数 是 可 选 的 , const 表示 它 是 不 可 以 改变 的 。 这 样 意味 着 在 
NewsManager a 不 传人 news 这 个 参数 。 


2.19 ” Flutter 中 解除 状态 的 特性 


现在 深入 研究 一 些 高 级 特性 ,首先 新 建文 件 news_control. dart, 在 回 ee 
NewsManager 中 找到 添加 按 纽 ,把 这 个 按钮 拆 分 成 小 部 件 , 放 到 news_ 视频 讲解 
control. dart 文件 中 。 在 news_control. dart 中 引入 flutter/material 包 , 创 


建 NewsControl 小 部 件 , 此 时 它 是 有 状态 的 还 是 无 状态 的 ? 它 应 该 是 一 个 无 状态 的 ,因为 
这 里 只 显示 一 个 按钮 ,不 需要 接收 任何 外 部 数据 ,只 是 泻 染 一 个 静态 按钮 ,所 以 这 是 一 个 不 
需要 改变 的 小 部 件 。 


接 下 来 添加 build() 方 法 ,返回 按钮 对 应 的 小 部 件 ,代码 如 下 : 


// chapter02/02 - 19/l1ib/news_control. dart 
return Container( 


margin: EdgeInsets.all(10.0), // 按钮 的 边 距 

child: RaisedButton( // 按钮 小 部 件 
color: Theme. of (context).primaryColor, // 按钮 的 颜色 
child: Text( ' 添 加 资讯 ')， // 按钮 上 的 文字 


onPressed: () { // 按钮 的 单 击 事件 


显然 这 里 不 能 使 用 setState() 方 法 。 我 们 希望 在 NewsManager 中 管理 news 数据 ,所 
以 NewsManager 是 有 状态 的 小 部 件 。NewsManager 是 NewsControl 小 部 件 和 News 小 部 
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件 的 纽带 。 解 除 状态 的 概念 是 什么 解除 状态 是 在 一 个 小 部 件 中 管理 状态 ,这 个 小 部 件 可 
以 访问 所 有 其 他 的 小 部 件 ,NewsManager 是 连接 小 部 件 , 它 可 以 触及 状态 的 变化 。 

现在 的 问题 是 怎样 把 NewsControl 中 的 按钮 单 击 事件 传递 给 NewsManager, 然 后 让 
NewsManager 调用 setState() 方 法 。 首 先 在 _NewsManagerState 类 中 创建 一 个 方法 ,代码 
如 下 : 


// Chapter02/02 - 19/1ib/news_manager. dart 


void _addNews(String news) { // 添加 资讯 方法 
setState(() { // 调用 setState() 方 法 
news.add(_news); // 添加 一 条 资讯 


1D); 
} 


_addNews() 方 法 返回 值 为 空 ,以 下 画 线 开始 ,表明 这 个 方法 只 会 在 这 个 文件 中 使 用 ， 
_addNews() 方 法 需要 一 个 新 的 news 作为 参数 ,类 型 是 String。 

现在 的 问题 是 怎样 通过 单 击 按钮 来 调用 这 个 _addNews() 方 法 ? 按钮 在 另外 一 个 小 部 
件 中 ,这 里 就 涉及 解除 状态 的 概念 ,解除 状态 是 把 所 有 跟 状 态 有 关系 的 小 部 件 的 状态 提取 出 
来 , 放 到 一 个 有 状态 的 小 部 件 中 ,然后 再 通过 这 个 有 状态 的 小 部 件 控制 所 有 被 提取 状态 的 小 
部 件 。 

被 提取 状态 的 小 部 件 NewsControl 需要 访问 NewsManager 中 的 _addNews() 方 法 ,在 
NewsManager 中 ,可 以 将 引用 传递 给 具有 访问 权限 的 小 部 件 , 所 以 可 以 把 _addNews() 作 为 
一 个 参数 传递 给 NewsControl。 请 注意 这 里 不 是 执行 ,所 以 不 能 加 小 括号 ,代码 如 下 : 


NewsControl(_addNews) // 传 递 方法 的 引用 


如 果 _addNews 后 加 小 括号 ,表示 当 调 用 build() 方 法 时 ,会 直接 调用 _addNews() 方 法 ， 
那么 这 个 _addNews() 方 法 只 会 传递 给 NewsControl 一 个 void 值 。 这 里 不 应 该 传递 一 个 返 
回 值 ,而 应 该 是 _addNews() 这 个 方法 的 引用 , 即 传递 了 这 个 方法 的 地 址 给 NewsControl。 
在 NewsControl 中 ,把 方法 参数 写 到 构造 器 里 ,代码 如 下 : 


// Chapter02/02 - 19/1ib/news_control. dart 

class NewsControl extends StatelessWidget{  // NewsControl 小 部 件 
Function addNews; // 定义 方法 属性 
NewsControl (this. addNews); // 在 构造 器 中 接收 方法 引用 


NewsControl 构造 器 接收 方法 引用 ,然后 保存 到 NewsControl 的 方法 属性 中 ,Function 
在 Dart 语言 中 是 一 个 单独 的 类 型 , 它 表示 这 个 属性 可 以 存储 方法 的 引用 ,在 参数 中 输入 
this. addNews ,确保 构造 中 接收 到 的 内 容 参 数 会 被 绑 定 到 这 个 方法 属性 中 。 

这 样 NewsControl 就 可 以 访问 NewsManager 小 部 件 中 的 方法 了 ,即使 在 NewsControl 
小 部 件 中 没有 定义 _addNews() 方 法 。 
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2.20 理解 Dart 语言 中 的 final 和 const 


Flutter 无 关 , 只 是 关于 Dart 语言 。 代 码 如 下 : 视频 讲解 
final List< String> news = []; // NewsManager 中 的 数据 news 


final 表示 属性 是 不 可 以 修改 的 ,不 可 以 设置 一 个 新 的 值 ,List < String > 是 引用 类 型 , 表 
示 可 以 编辑 一 个 存在 的 数组 ,而 不 是 在 创建 一 个 新 的 数组 。 所 以 news. add( 'first') 不 会 把 
新 的 对 象 赋值 给 news。 这 跟 数 字 不 一 样 ,如 果 定 义 一 个 数字 age 王 12 ,在 setState() 方 法 
中 , 改 成 age 一 29 ,会 得 到 一 个 警告 ,显示 不 能 修改 age, 这 是 因为 我 们 通过 等 号 给 age 重新 
赋值 了 ,但 在 news 这 里 我 们 没有 使 用 等 号 。 数 组 和 对 象 是 引用 类 型 ,final List < String > 
news 一 [表示 保存 了 news 的 引用 ,即使 用 final 修饰 ,调用 news 的 任何 方法 都 是 没 问 题 
的 ,可 以 改变 它 内 部 的 数据 ,但 是 不 可 以 给 它 重新 赋值 。 所 以 在 final int age 一 12 赋值 后 ,可 
以 调用 age 的 round() 方 法 。 
final 修饰 的 属性 不 可 以 使 用 等 号 给 它 重新 赋值 ,但 可 以 调用 它 的 内 部 方法 。 还 有 一 个 
关键 字 const, 使 用 const 修饰 的 属性 表示 它 是 常量 ,并 且 这 个 属性 永久 不 变 , 也 不 可 以 调用 
属性 的 内 部 方法 。 
ws 回 
让 


2.21 总 结 


本 章 我 们 学 习 了 有 关 Flutter 的 很 多 基本 概念 ,大 家 要 牢记 Flutter 中 ” 国 喝 营 站 痉 
一 切 都 是 小 部 件 。 我们 学 习 了 根 小 部 件 MaterialApp、 页 面 小 部 件 视频 讲解 
Scaffold、Scaffold 的 参数 body 中 又 包含 了 其 他 小 部 件 ,例如 列 、 图 片 、 文 字 
等 。 有 一 些小 部 件 只 是 获取 外 部 数据 ,例如 StatelessWidget。StatelessWidget 也 可 以 不 获 
取 外 部 数据 ,只 是 静态 地 显示 小 部 件 树 。 我 们 还 学 习 了 StatefulWidget, 它 可 以 从 外 部 接收 
数据 ,也 可 以 通过 调用 setState() 方 法 改变 内 部 数据 ,然后 再 次 调用 build() 方 法 。 

本 章 介绍 了 Flutter 和 Dart 的 关系 ,Dart 是 一 门 编程 语言 ,Flutter 是 一 个 SDK ,也 是 一 
个 框架 。Flutter 中 的 工具 可 以 使 Dart 编码 编译 成 本 地 代码 ,同时 Flutter 还 提供 了 丰富 的 
类 和 小 部 件 ,可 以 通过 它们 构建 应 用 。Dart 中 可 以 使 用 类 构造 器 .类 型 。 我 们 还 学 习 了 如 
何 给 小 部 件 传递 数据 ,通过 构造 器 方法 把 数据 传递 给 其 他 小 部 件 。StatefulWidget 中 有 一 
个 特殊 的 属性 widget, 可 以 通过 它 访问 对 应 的 小 部 件 中 的 属性 ,StatefulWidget 的 生命 周期 
和 StatelessWidget 不 同 。 这 些 都 是 Flutter 的 基础 知识 .需要 大 家 深入 学 习 。 


调试 Flutter 应 用 程序 


在 开发 任何 类 型 的 App 时 ,调试 是 一 定 要 做 的 事情 。 通 过 调试 我 们 可 以 定位 App 的 
错误 。 本 章 我 们 将 学 习 在 开发 App 时 遇 到 的 各 种 问题 和 解决 方法 。 让 我 们 开始 吧 ! 


3.1 解决 语法 错误 


我 们 以 -个 简单 的 问题 或 经 常 出 现 的 语法 错误 开始 。 什么 是 语法 错误 ? 语法 错误 表示 
编写 的 代码 无 法 工作 。 例 如 : 调用 某 个 对 象 不 存在 的 方法 .忘记 添 
import 引入 等 。 


在 news_manager. dart 文件 中 注释 掉 import 这 行 代码 ,代码 如 下 : 


// import 'package:flutter/material. dart'; // 注 释 引 入 的 包 
网 视频 讲解 
IDE 中 报 了 语法 错误 ,如 图 3. 1 所 示 


art' 
ontrol .dart"; 


NewsManager extends Statefutyidget { 


inal String startingNew Classes can only extend other classes. 
NewsManager({this.s Try specifying a different superclass, or removing the extends 


print( news manag cLause. dart(extends_non_ctass) 


Undefined class 'Statefutwidget' . 
Try changing the name to the name of an existing class, or creating a class 


atefutwidget> cr T" 
with the nawe ‘Statefulyidget". dart(undefined_class) 


print( ‘news manager 的 c 
return _NewsManagerSta 


图 3.1 错误 提示 信息 


IDE 能 检测 大 多 数 的 语法 错误 ,把 鼠标 悬 停 在 红线 处 ,被 告知 “没有 定义 
StatefulWidget, 方 法 也 没有 在 superclass 中 定义 ”。Dart 语言 中 任何 值 都 是 对 象 ,数字 是 对 
象 , 列 表 是 对 象 ,它们 都 继承 于 一 个 基 类 Superclass ,即使 自己 定义 的 类 继承 了 其 他 的 类 , 它 
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的 上 级 的 类 终 将 继承 这 个 基 类 .这 就 是 这 里 报错 的 原因 。 

news_manager. dart 很 多 错 都 是 报 “ 没 有 定义 方法 ”。 这 意味 着 我 们 没有 定义 类 或 者 忘 
记 引 入 类 ,所 以 语法 错误 通常 是 逻辑 上 出 的 问题 。 语 法 错误 不 仅仅 是 漏 掉 import。 如 果 把 
news_manager. dart 中 的 属性 _news 前 面 的 下 画 线 去 掉 ,就 会 出 现 如 图 3. 2 所 示 的 错误 提 
示 信 息 。 


s NewsManagerState extends State<NewsManager> { 
List<String> hews = []; 


Boverride 
void initState() { 
print('news manager 的 initState'); 
_news.add(wjidget.startingNews); 
super ,initState(); 


Soverride 
void didUpdateWidget(NewsManager oldWidget) { 
print('news manager 的 didUpdatewidget '); 


加 PT il- 
Undefined name '_news' . 
Try correcting the name to one that is defined, or defining the 


id nane, dart(undefined identifier) 
vo 


se 
-news.add(news); 
D; 
} 


图 3.2 属性 的 错误 提示 信息 


错误 提示 没有 定义 _news, 所 以 出 现 这 些 情况 的 时 候 , 首 先 要 做 的 是 检查 代码 。 代 码 中 
是 否 添加 了 这 个 属性 ? 忘记 引入 什么 了 吗 ? 

还 有 一 些 错误 是 忘记 编写 了 一 些 内 容 , 例 如 分 号 ,这 是 典型 的 语法 错误 。 还 有 一 种 语法 
错误 是 赋值 类 型 与 属性 类 型 不 符 , 例 如 需要 传人 的 是 浮 点 型 数据 ,但 是 如 果 传 人 了 整 型 数 
据 , 会 有 错误 提示 “ 整 型 不 能 赋值 给 浮 点 型 ” 

IDE 可 以 提供 给 我 们 很 多 警告 或 者 是 错误 信息 ,如 果 阅 读 这 些 错 误 信息 就 可 以 很 好 地 
解决 语法 错误 。 


3.2 运行 时 错误 和 运行 时 日 志 消 息 


在 模拟 器 中 多 次 单 击 添加 资讯 的 按钮 ,如 图 3. 3 所 示 。 
发 现 如 图 3.4 所 示 , 显 示 了 一 些 错误 信息 。 这 是 Flutter 的 一 个 很 好 的 。 视频 讲解 
功能 。 
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图 3.3 模拟 器 


图 


在 Debug Console 中 可 以 看 到 一 
首先 检查 底部 ,有 时 可 以 在 底部 找到 妇 


3.4 显示 的 错误 信息 


个 错误 信息 。 那 样 怎样 阅读 Flutter 的 错误 信息 呢 ? 


和 要 的 信息 。Debug Console 中 打印 了 很 多 信息 ,需要 


向 上 滚动 ,找到 如 图 3. 5 所 示 的 分 隔 线 。 
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图 3.5 Debug Console 中 的 分 隔 线 


在 分 隔 线 下 面 可 以 发 现 * 底 部 的 这 染 超过 了 174 像素 ”, 这 部 分 信息 很 有 用 ,Flutter 中 
的 错误 信息 通常 提供 解决 办 法 或 者 提供 一 个 间接 的 解决 方案 ,例如 这 里 可 以 看 到 详细 的 问 
题 描 述 ,建议 使 用 flex factor, 或 者 可 以 使 用 ListView。 这 些 建 议 很 有 用 。 当 遇 到 错误 信息 
时 ,要 认真 阅读 它们 ,很 多 错误 信息 描述 得 都 很 清晰 ,甚至 提供 了 解决 方法 ,没有 解决 方法 的 
也 会 告诉 哪里 错 了 。 

看 另外 一 个 例子 ,在 属性 _news 的 值 前 面 加 上 static const, 编 译 没 有 报错 ,但 如 果 重 启 
应 用 会 看 到 错误 信息 ,屏幕 上 也 有 错误 信息 ,显示 不 能 给 一 个 不 可 以 改变 的 列表 添加 值 。 在 
Debug Console 中 检查 时 会 发 现 这 样 的 提示 : unsupported operation cannot add to an 
unmodified list. 这 些 错 误 叫 运行 时 错误 ,它们 不 会 在 开发 的 时 候 报错 。 运 行 时 错误 通常 描 
述 得 很 清晰 ,显示 错误 是 在 文件 中 的 哪个 地 方 发 生 的 ,同时 也 可 以 通过 跟踪 问题 栈 直接 找到 
有 用 的 错误 信息 。 


3.3 ”人 处理 逻辑 错误 


现在 学 习 一 下 如 何 处 理 逻 辑 错误 。 什 么 是 逻辑 错误 呢 ? 在 news_ 
manager. dart 中 的 _addNews() 方 法 中 ,可 能 由 于 一 时 玖 忽 , 忘 记 调用 
setState() 方 法 。 这 样 的 错误 不 会 产生 提示 ,因为 是 忘记 了 添加 内 容 。 保 存 
并 重启 应 用 ,没有 任何 错误 提示 ,但 如 果 单 击 添加 资讯 按钮 ,什么 事情 都 没有 发 生 ,这 时 我 们 
意识 到 可 能 是 哪里 出 错 了 ,然而 却 没有 任何 错误 提示 。 应 用 并 没有 按照 我 们 想 要 的 效果 显 
示 , 这 就 是 逻辑 错误 。 也 是 最 难 发 现 的 错误 ,因为 App 运行 正常 ,而 且 没 有 错误 提示 。 

如 何 调试 这 样 的 逻辑 错误 呢 ? 一 种 方法 是 查看 代码 ,我 们 自己 最 清楚 单 击 按钮 时 应 该 
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发 生 什么 ,所 以 首先 检查 单 击 按钮 是 否 调用 了 正确 的 方法 ,同时 检查 是 否 传递 了 正确 的 数 
据 , 然 而 并 没有 发 现 问题 。 

再 检查 _addNews() 方 法 ,快速 核对 一 下 这 个 _news 列表 是 否 更 新 了 ,可 以 打印 一 条 请 
句 , 代 码 如 下 : 


// Chapter03/03 - 03/1ib/news_manager. dart 


void addNews(String news) { // 添加 资讯 方法 
_news. add( news); // 给 _news 列表 添加 数据 
print(_news); // 打印 _news 列表 中 的 数据 
} 


print() 方 法 不 会 在 模拟 器 上 显示 任何 内 容 , 所 以 我 们 把 print() 方 法 叫 作 调试 工具 。 保 
存 重 新 加 载 后 ,在 控制 台中 显示 的 内 容 一 切 正常 ,所 以 问题 不 在 这 里 。 这 时 应 该 想到 是 不 是 
Flutter 没有 意识 到 这 里 的 改变 ?我 们 在 这 里 添加 setState() 方 法 ,解决 了 这 个 问题 。 这 种 
代码 跟踪 的 方式 可 以 解决 像 这 样 的 多 辑 错误 。 但 有 些 时 候 可 能 会 很 难 , 因 为 代码 可 能 会 很 
复杂 ,所 以 下 一 节 我 们 学 习 如 何 使 用 断 点 来 调试 。 


3.4 使 用 debug 断 点 调试 


3.3 节 的 代码 跟踪 不 需要 设置 断 点 ,很 多 IDE 都 提供 debug 工具 ,如 回 5 
图 3.6 所 示 。 视频 讲解 


package:flutter/material .dart"; 


NewsControl StatelessWidget{ 
Function addNews; 
NewsControl ( "BddNews); 


Widget build(BuildContext context) { 
ett Container( 
margin: EdgeInsets,att(16.6) ， 


child: RaisedButton( 
color: Theme.of(context) .primaryColor, 
child: Text(' 添 加 资讯 ')， 
onPressed: () { 
addNews ( "five" ); 


图 3.6 IDE 中 的 断 点 
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在 代码 所 在 行 的 左 侧 单 击 后 有 一 个 小 红 点 ,这 就 是 断 点 。 使 用 断 点 需要 用 debug 方式 
启动 App, 启 动 好 后 , 单 击 添加 资讯 按钮 会 跳 转 到 IDE 界面 , 停 在 我 们 标记 的 这 一 行 上 ,这 
时 可 以 使 用 顶部 的 控制 面板 来 跟踪 代码 ,如 图 3.7 所 示 ， 


3.7 IDE 中 的 调试 面板 


单 击 向 下 箭头 ,会 进入 _addNews() 方 法 中 ,继续 单 击 可 以 跟踪 代码 执行 的 每 一 步 。 把 
鼠标 甚 停 在 参数 上 面 ,如 图 3. 8 所 示 ,可 以 能 看 到 它 内 部 包含 哪些 内 容 。 


didUpdateWidget (NewsMana oldWidget) { 
print( ne Nag idUpdateWidget'); 
"didu Closure: (0bject) => void from Function ‘add'.. 
» 


je: 1008629391 


addNew  ， 
setState(( 
9 | [news.add(news); 
a 
} 


图 3.8 显示 当前 news 中 包含 的 数据 等 信息 


在 IDE 的 watch 区域 ,输入 news, 继 续 运 行 代码 ,可 以 观察 news 的 变化 。 我 们 还 可 以 
通过 IDE 的 调用 栈 调试 ,观察 传人 的 参数 是 否 正确 ,或 者 变量 中 是 否 保存 了 一 个 非 期 望 的 
值 。 使 用 debug 工具 和 断 点 绝对 是 个 好 办 法 。 如 果 完 成 了 调试 可 以 单 击 图 3.7 中 最 左 侧 的 
三 角形 箭头 来 执行 后 面 的 代码 。 如 果 想 删除 一 个 断 点 ,再 单 击 一 次 红 点 就 可 以 ,以 上 就 是 通 
过 IDE 进行 调试 的 方法 。 


3.5 UI 调试 及 视觉 帮助 工具 
在 main. dart 文件 的 main() 方 法 中 可 以 添加 更 多 的 变量 ,例如 夯 


debugpaintbaselinesenabled 二 true, 添 加 之 前 ,需要 引入 调试 的 包 文件 ,代码 视频 讲解 
如 下 : 


ch 


elk 


// Chapter03/03 - 05/1ib/main. dart 

import 'package:flutter/rendering. dart'; // 引 入 调试 UI 用 的 包 文件 

保存 并 重启 应 用 ,可 以 在 模拟 器 中 看 到 一 些 黄色 和 绿色 的 线 , 表 示 文 字 的 基线 和 文字 的 
位 置 ,如 图 3.9 所 示 。 

main() 方 法 中 还 可 以 添加 debugPaintPointersEnabled 二 ture, 保 存 并 重启 应 用 后 ,我 们 
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图 3.9 UI 调试 


发 现 没 任何 变化 ,但 如 果 单 击 模拟 器 屏幕 会 突出 显示 ,提示 我 们 哪里 有 单 击 事件 ,这 样 就 可 
以 知道 在 哪里 加 监听 。 也 可 以 在 MaterialApp 中 设置 调试 变量 例如 
debugShowMaterialGrid: true。 保 存 并 重启 应 用 ,模拟 器 屏幕 上 显示 了 很 多 小 的 网 格 ,这 些 
网 格 对 UI 设计 有 帮助 。 以 上 的 调试 配置 只 在 开发 的 过 程 中 使 用 ,它们 可 以 帮助 我 们 精确 
地 计算 每 个 元 素 之 间 的 位 置 , 因 此 如 果 想 要 找 出 两 个 元 素 的 位 置 是 否 相 同 或 居中 ,可 以 使 用 
这 种 网 格 定位 的 方式 检查 。 

错误 经 常 发 生 , 这 一 章 我 们 学 习 了 很 多 好 用 的 工具 来 定位 并 改正 错误 ,不 同 的 错误 有 不 
同 的 调试 方法 。 语 法 和 编码 错误 IDE 会 有 提示 信息 ,可 以 把 鼠标 悬 停 在 红线 上 查看 错误 信 
息 。 和 运行 时 错误 通常 会 显示 到 屏幕 或 者 控制 台 上 ,需要 认真 阅读 这 些 错误 信息 。 我 们 还 学 
习 了 断 点 和 调试 器 , 断 点 可 以 帮助 我 们 一 步 步 地 分 析 , 同 时 可 以 看 到 返回 的 变量 值 。 我 们 通 
过 悬 停 ,debug 面板 ,watch 来 进行 调试 ,也 可 以 通过 打印 的 方式 进行 调试 。 最 后 我 们 学 习 
了 调试 页 面 上 小 部 件 的 位 置 ,来 解决 显示 的 问题 。 


在 不 同 设 备 上 运行 
Flutter 应 用 程序 


在 之 前 的 章节 中 ,Flutter 应 用 有 些 是 在 Android 的 模拟 器 上 运行 的 ,后 面 的 章节 会 继 
续 使 用 Android 模拟 器 ,因为 不 管 使 用 的 操作 系统 是 Windows、Mac 或 者 Linux 都 可 以 运 
行 Android 模拟 器 。 我 们 也 可 以 将 应 用 运行 到 一 个 Android 设备 上 ,如 果 使 用 Mac 开发 ， 
还 可 以 将 应 用 运行 到 iOS 模拟 器 上 或 者 iPhone 设备 上 。 本 章 介绍 如 何 将 Flutter 应 用 运行 
到 这 些 设备 上 。 


4.1 将 App 运行 到 Android 模拟 器 上 


在 第 1 章 中 ,我 们 学 习 了 如 何 启 动 Android 模拟 器 。 在 Visual Studio 国 演 ey 
Code 中 ,通常 情况 下 启动 应 用 使 用 Debug 菜单 下 的 Start Without 视频 讲解 
Debugging, 启 动 后 如 图 4. 1 所 示 。 

在 控制 面板 中 有 一 个 红色 的 小 方块 可 以 使 应 用 停止 运行 ,也 可 以 按 快捷 键 Ctrl 十 F5 重 
新 运行 ,不 是 重新 Debug ,而 是 重启 了 应 用 , 重 置 了 应 用 的 状态 。 

有 些 时候 需 要 使 用 热 加 载 功 能 ,修改 文件 并 保 
存 后 , 热 加 载 会 自动 触发 ,所 以 就 不 必 重启 应 用 了 。 wl 
当 需 要 重新 Debug 的 时 候 , 单 击 图 4. 1 中 的 红色 图 4.1 启动 应 用 后 的 控制 面板 
方块 ,然后 按 快捷 键 Ctrl 十 F5 就 可 以 重新 Debug， 

这 些 操作 都 是 可 选 的 。 如 果 不 使 用 Visual Studio Code 的 控制 面板 ,还 可 以 在 控制 台中 运 
行 flutter run 命令 启动 应 用 ,然后 按 R 键 进行 热 加 载 , 按 Shift 十 R 键 重启 应 用 。 ee 
使 用 按 Ctrl 十 C 键 ,退出 后 可 以 再 次 运行 flutter run 启动 应 用 。 以 上 是 将 Flutter 应 用 运 

在 Android 模拟 器 上 的 情况 ,下 一 节 看 一 下 如 何 将 Flutter 应 用 运行 到 Android 人 


4.2 将 Flutter 应 用 运行 到 Android 设备 上 


首先 在 Android 设备 上 使 USB 调试 可 用 ,并 选择 开发 模式 ,如 图 4. 2 国 册 Sr 罗 
所 示 。 视频 讲解 
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和 5115:07 中 … 全 4 区 DD 


< 开发 者 选项 
开发 者 选项 | © 


内 存 

提交 错误 报告 
Re 

不 证 

启用 大 HCI 信息 收集 日 志 
OEM 解锁 

下 运行 的 有 务 
WebView 实现 

自动 系统 更 新 


快捷 设置 开发 者 图 块 


USB 调 试 @ 
图 4.2 Android 设备 截图 


在 Android 设备 中 找到 构建 版 本 ,多 次 单 击 直 到 显示 开发 模式 为 止 ,这 样 就 可 以 在 
Android 设备 上 运行 App 了 ,然后 需要 把 Android 设备 连 到 计算 机 上 ,在 Visual Studio 
Code 右 下 角 可 以 看 到 连接 的 设备 ,如 图 4. 3 所 示 。 


I/flutter ( 4989): news 的 构造 器 

IfLutter ( 4989): news 的 build 方 法 

D/EGL_emulation( 4980): eglMakeCurrent: Ox9c896dc9: ver 3 8 (tinfo ex8bb13690) 
Syncing files to device Android SDK built for x86 

5,260ms (!) 


- 
An Observatory debugger and profiler on Android SDK built for x36 is available at: http://127.0.0.1:54804/cSINLiz63E0=, 
For a more detailed help message, press “h". To detach, press “d"; to quit, press “q 


In 27, cal29 Spaces 2 UTF-8 LF Dart Flutter15.4-hottx W730EN(NOd 0 © $2 


图 4.3 IDE 中 显示 连接 的 Android 设备 
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当 在 控制 台 输 入 命令 flutter run 或 者 按 Ctrl 十 F5 键 启动 时 ,App 就 会 运行 到 设备 上 。 
我 们 也 可 以 同时 将 App 运行 到 模拟 器 和 真实 设备 上 。 单 击 右 下 角 连 接 的 设备 可 以 选择 运 
行 App 的 设备 ,运行 后 ,会 把 App 运行 到 指定 的 设备 或 模拟 器 上 ,所 以 单 击 右 下 角 连 接 的 
设备 可 以 切换 运行 设备 。 这 是 将 Flutter 应 用 运行 到 Android 的 真实 设备 ,下 一 节 学 习 如 何 
将 Flutter 应 用 运行 到 iOS 设备 。 


4.3 将 App 运行 到 iOS 模拟 器 和 设备 上 


在 iOS 模拟 器 上 运行 App, 只 能 使 用 Mac 进行 操作 。 首 先 启动 模拟 器 ,在 终端 运行 命 
令 open -a simulator 来 打开 iOS 模拟 器 ,这 个 命令 可 以 在 任何 的 Mac 上 运行 ,这 样 我 们 就 
打开 一 个 iPhone 模拟 器 。 可 以 在 顶部 的 菜单 栏 中 设置 iOS 模拟 器 ,如 图 4. 4 所 示 , 在 
Hardware 中 选择 不 同 的 设备 ,也 可 以 使 用 或 禁用 键盘 ,然后 按 Ctrl 十 F5 键 启 动 App。 


i 
4.4 iOS 模拟 器 
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在 模拟 器 上 可 以 运行 99% 的 功能 ,目前 应 用 使 用 的 是 Material Design, 后 面 还 会 学 习 
使 用 iOS 特定 的 小 部 件 。 

如 何 将 Flutter 应 用 运行 到 iPhone 设备 上 ? 首先 需要 连接 一 个 iPhone 的 真 机 设备 , 当 
将 iPhone 连接 到 计算 机 上 时 ,会 收 到 一 个 提示 ,显示 是 否 信任 这 台 计 算 机 。 单 击 “ 是 ”来 保 
证 正常 的 访问 ,但 是 在 Visual Studio Code 的 右 下 角 并 没有 发 现 这 个 设备 ,这 时 需要 打开 
Xcode, 不 是 使 用 Xcode 编写 代码 ,而 是 用 它 打开 iOS 项 目 。 在 Visual Studio Code 中 进入 
flutter 目录 ,然后 进入 ios 目录 ,双击 打开 Runner. xcworkspace, 单 击 左 上 角 的 项 目 选 择 
Runner, 如 图 4.5 所 示 。 


图 4.5 Xcode 中 的 项 目 


在 General 中 选择 Team ,如 果 没 有 团队 ,需要 添加 一 个 账号 ,然后 使 用 Apple 账号 登 
录 , 登 录 成 功 后 选择 这 个 账号 ,这 就 是 所 谓 的 签名 配置 文件 。 需 要 签署 应 用 来 证 明 可 以 在 
iPhone 上 安装 它 。 单 击 顶 部 选择 连接 的 iPhone 设备 ,就 可 以 将 应 用 运行 到 iPhone 设备 
上 了 。 


d 


列表 ListView 小 部 件 
和 条 件 过 滤 


本 章 深入 学 习 一 个 重要 概念 , 泻 染 列表 和 根据 条 件 显示 内 容 。 我 们 已 经 泻 染 过 一 个 列 
表 了 ,通过 按钮 添加 多 个 news, 但 是 报错 了 ,因为 内 容 超 出 了 屏幕 的 大 小 。 现 在 我 们 来 深入 
学 习 如 何 泻 染 多 个 元 素 的 列表 ,以 及 如 何 根据 某 些 条 件 显示 内 容 。 


5.1 使 用 ListView 创建 滚动 列表 


-i 
首先 解决 App 中 的 第 一 个 问题 ,在 News 小 部 件 中 ,我 们 尝试 使 用 加 站 民品 生 
Column 小 部 件 来 泻 染 一 个 列表 ,Column 可 以 拥有 多 个 子 部 件 , 可 以 使 用 视频 讲解 
news 列表 ,通过 map() 方 法 转换 成 一 组 小 部 件 ,然后 赋值 给 Column 中 的 
children 参数 。 我 们 返回 的 是 一 些 Card。 这 些 Card 可 以 被 浑 染 到 屏幕 上 ,但 问题 是 添加 更 
多 的 Card 时 会 报错 ,而 且 不 能 滚动 ,如 图 5.1 所 示 。 


图 5.1 添加 更 多 的 news 时 报错 


类 试 在 


Flutter 尝 
件 。 如 果 想 实现 


么 Column 是 


-个 很 好 的 选择 


-个 页 面 加 载 它 们 ,发 现 空间 不 足 ,所 以 这 里 不 应 该 使 用 Column 小 部 
- 些 元 素 彼 此 是 上 下 排列 的 ,从 上 到 下 演 染 ,并 且 不 打算 使 用 滚动 功能 , 那 
。 但 是 在 这 个 例子 中 ,页 面 中 存在 多 个 Card 小 部 件 , 它 们 可 


nt 
ol 
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El 会 超越 屏幕 的 边界 ,Column 就 不 是 正确 的 选择 了 。 


但 是 有 
表 的 小 部 件 , 它 也 有 children 参数 需要 传人 
重启 ,代码 如 下 : 


本 


// Chapter05/05 - 01/1ib/news. dart 
return ListView( 
children: news. map( 
(element) { 
return Card( 
child: Column( 
children: <Widget >[ 
Image. asset('assets/newsl. jpg'), 
Text(element) 


}, 
).toList(), 


); 
在 IDE 中 显示 了 错误 信息 


个 小 部 件 能 够 满足 这 个 例子 的 要 求 , 它 叫 ListView。 
-组 小 部 件 , 用 ListView 替换 Column ,保存 


\, 如 图 5. 2 所 示 


ListView 是 一 个 泻 染 列 


// 用 ListView 替换 Column 浑 染 列表 
// 使 用 map 遍历 news 中 的 内 容 

// element 表示 news 中 的 每 个 元 素 
// 返回 Card 小 部 件 

// Card 中 显示 内 容 的 Column 小 部 件 
// Column 中 的 子 小 部 件 

// 图 片 

// 图 片 下 面 的 文字 


// 将 遍历 后 的 结果 转换 成 List 类 型 


图 5.2 


这 是 一 个 含糊 不 清 的 错误 提示 ,实际 上 提示 的 是 ListView 不 能 在 按钮 下 


这 大 


news_manager. dart 文件 中 ,代码 如 下 : 


// Chapter05/05 - 01/l1ib/news_manager. dart 


return Column( 


IDE 中 的 错误 信息 


使 用 ,在 


// 将 News 列表 显示 在 按钮 NewsControl 下 面 
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children: < Widget >[ NewsControl(_addNews), News(_news)], 
); 

ListView 是 在 一 个 按钮 下 面 使 用 的 ,ListView 的 上 面 是 一 个 Container 包装 的 按钮 ,在 
Flutter 中 不 能 这 样 用 。 如 果 在 Column 中 创建 了 一 个 Container 或 其 他 组 件 ,然后 在 这 个 
小 部 件 下 面 使 用 ListView ,需要 把 这 个 ListView 也 包装 成 另外 一 个 Container, 所 以 这 里 需 
要 把 ListView 赋值 给 Container 的 child。 同 时 需要 设置 Container 的 高 度 , 定 义 Container 
的 大 小 。 代 码 如 下 : 

// Chapter05/05 - 01/1ib/news. dart 

return Container( // 把 ListView 用 Container 包装 

height:300, // 设置 Container 的 高 度 


child: ListView( 
children: news.map( 


我 们 把 它 的 高 度 设置 为 300.0。 保 存 之 后 ,可 以 看 到 列表 显示 出 来 了 , 单 击 按钮 可 以 添 
加 新 的 Card, 但 是 Container 只 有 300 像素 的 高 度 , 如 图 5. 3 所 示 。 


图 5.3 ListView 所 在 的 Container 的 高 度 


如 果 想 使 用 余下 所 有 的 可 用 空间 ,可 以 先 把 height 删除 ,再 把 Container 替换 成 另外 一 
个 小 部 件 Expanded。Expanded 小 部 件 可 以 使 用 按钮 下 面 的 剩余 可 用 空间 ,代码 如 下 : 
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// Chapter05/05 - 01/1ib/news. dart 


Expanded( // 使 用 Column 中 按钮 下 面 的 剩余 可 用 空间 
child: ListView( // 使 用 ListView 
children: news.map( // 用 ListView 泻 染 列 表 
(element) { // 遍历 news 中 的 元 素 
return Card( // 返回 Card 小 部 件 


现在 这 个 列表 可 以 上 下 滚动 ,这 样 就 实现 了 一 个 可 以 滚动 的 List。 如 果 添 加 更 多 的 
Card ,就 可 以 滚动 显示 了 ,而 且 不 报错 ,然而 如 果 在 这 里 快速 添加 多 个 Card, 导 致 这 个 小 部 
件 频繁 被 调用 ,就 会 产生 性 能 问题 ,所 以 要 做 一 些 事 情 来 避免 这 样 的 问题 ,因为 事先 我 们 并 
不 知道 news 的 确切 数量 。 下 一 节 学 习 如 何 提升 列表 的 性 能 。 


5.2 优化 列表 加 载 功 能 


ListView 小 部 件 非常 有 用 ,上 一 节 使 用 ListView 并 给 它 的 children 传 国 喘 滞 潮 
递 了 一 组 小 部 件 ,这 对 于 只 有 几 条 记录 的 列表 很 好 ,而 且 知道 记录 的 数量 不 视频 讲解 
会 太 多 ,那么 上 一 节 的 实现 方式 就 足够 了 ,但 如 果 一 个 列表 是 动态 添加 的 ， 

并 且 无 法 预测 数量 ,或 者 已 经 知道 列表 中 有 成 千 上 万 个 元 素 , 那 么 用 上 一 节 的 方式 创建 就 会 
非常 低 效 , 因 为 这 种 方式 创建 的 列表 ,列表 中 的 所 有 元 素 都 会 被 泻 染 ,那么 有 什么 好 方式 呢 ? 
可 以 当 需 要 显示 列表 中 的 一 个 元 素 时 再 这 染 它 ,所 以 在 向 下 滚动 时 ,在 当前 元 素 后 的 下 一 个 
元 素 是 需要 被 呈现 的 ,在 它 进 入 视图 之 前 立即 泻 染 它 , 同 时 可 以 把 滚动 出 视野 的 元 素 销毁 ， 
这 是 一 种 非常 高 级 的 编码 方式 ,Flutter 已 实现 这 种 方式 泻 染 列表 ,因此 不 必 上 自己 编写 代码 。 

Flutter 能 够 自动 销毁 不 需要 再 显示 的 内 容 , 可 以 添加 即将 被 显示 的 内 容 , 这 是 非常 高 
效 的 ,不 需要 在 内 存 中 保留 现在 不 需要 看 到 的 内 容 。 我 们 可 以 使 用 ListView 的 builder 构 
造 器 达到 这 种 效果 。builder 构造 器 中 没有 children 这 个 参数 ,builder 构造 器 中 使 用 的 是 另 
外 两 个 参数 ,itemBuilder 和 itemCount。itemCount 表示 需要 构建 多 少 条 记录 ,itemBuilder 
包含 一 个 方法 来 定义 构建 什么 样 的 小 部 件 。 方 法 中 包含 一 组 参数 和 一 个 方法 体 ,可 以 使 用 
匿名 方法 给 itemBuilder 赋值 ,也 可 以 在 类 中 创建 一 个 方法 ,然后 把 方法 引用 赋值 给 
itemBuilder。 


我 们 使 用 第 二 种 方式 ,在 类 中 创建 一 个 _buildNewItem() 方 法 ,代码 如 下 : 


// Chapter05/05 - 02/1ib/news. dart 


return Expanded( // 使 用 剩余 的 空间 

child: ListView. builder( // 使 用 builder 构造 器 创建 ListView 
itemBuilder: _buildNewItem, // 如 何 构 建 列表 中 元 素 
itemCount: news. length, // 列表 的 元 素 的 数量 


入 
) 


以 下 画 线 开头 的 方法 表示 它 只 在 这 个 类 中 使 用 ,这 是 约定 好 的 。 这 个 方法 可 以 返回 一 
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个 小 部 件 ,表示 构建 一 个 什么 样 的 记录 ,可 以 把 构建 Card 的 代码 放 到 这 里 。 代 码 如 下 : 


// Chapter05/05 - 02/1ib/news. dart 
Widget _buildNewItem(context，index) { // 构建 列表 中 元 素 的 方法 
return Card( // 返回 构建 的 Card 小 部 件 
child: Column( 
children:< Widget >[ 
Image.asset('assets/newsl. jpg'), // Card 中 的 图 片 
Text(news[ index])], // Card 中 的 文字 
), 
); 
} 

_buildNewItem() 在 构建 列表 时 被 Flutter 执行 。itemBuilder 不 只 是 返回 一 个 小 部 件 ， 
同时 还 需要 使 用 两 个 参数 ,一 个 是 context, 它 是 BuildContext 类 型 ,之 前 我 们 在 设置 主题 时 
使 用 过 它 ; 另 一 个 是 index,index 是 即将 被 构建 的 元 素 的 索引 ,列表 中 的 每 一 个 元 素 都 有 索 
引 , 代 表 它 在 列表 中 的 位 置 ,index 类 型 是 int。 通 过 index 我 们 可 以 知道 元 素 在 列表 中 的 位 
置 。news 是 小 部 件 中 的 一 个 属性 ,所 以 我 们 可 以 通过 属性 news[Lindexj] 方 式 得 到 这 个 动态 
的 元 素 ,news[index] 表 示 news 列表 中 的 某 一 条 记录 。news 列表 是 string 类 型 的 数组 ,所 
以 这 里 是 一 个 string 类 型 的 内 容 , 它 将 在 屏幕 上 显示 为 文字 。 

这 样 我 们 就 完成 了 itemBuilder() 方 法 的 编写 ,这 个 方法 将 构建 每 一 条 记录 ,但 是 我 们 
需要 知道 它 构 建 了 多 少 条 记录 ,这 就 需要 使 用 itemCount 参数 了 。 构 建 属 性 news 列表 , 列 
表 有 一 个 可 以 访问 的 属性 length。news. length 告诉 这 个 列表 中 一 共有 多 少 条 记录 。 设置 
好 itemCount 参数 后 ,ListView. builder() 将 为 我 们 做 剩 下 的 事情 , 它 将 根据 指定 的 数量 和 
_buildNewlItem() 方 法 构建 列表 。 在 _buildNewlItem() 方 法 中 可 以 做 任何 事情 ,这 个 例子 是 
从 news 列表 中 提取 记录 ,并 构建 Card 小 部 件 。 保 存 并 重启 后 ,我 们 不 会 意识 到 使 用 了 另 
外 一 种 高 性 能 的 方式 来 构建 列表 。 这 种 方式 对 于 很 长 的 列表 或 者 不 知道 有 多 长 的 列表 非常 
高 效 。 


5.3 ”根据 条 件 泻 染 列表 内 容 


目前 已 经 学 习 了 很 多 关于 ListView 的 内 容 ,在 main. dart 中 , 当 我 们 国 嵌 各 让 和 
不 给 NewsManager 小 部 件 传 值 的 时 候 ,NewsManager 中 的 startingNews 视频 讲解 
的 值 是 空 的 ,可 以 在 NewsManager 的 initState() 方 法 中 检查 它 是 否 为 空 。 

在 不 为 空 的 情况 下 ,再 把 它 添加 到 news 列表 中 ,代码 如 下 : 


// Chapter05/05 - 03/1ib/news_manager. dart 
class _NewsManagerState extends State < NewsManager > { 
List< String> _news = []; // _NewsManagerState 中 的 news 列表 


@override 
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void initState() { // 初始 化 方法 
// 判断 传人 的 startingNews 是 否 为 空 
if(widget. startingNews != null){ // 如 果 不 为 空 


// 把 startingNews 添加 到 news 列表 
_news.add(widget. startingNews); 
} 


然后 可 以 在 main. dart 中 给 命名 参数 startingNews 赋值 ,这 里 加 的 让 请 句 是 条 件 语句 。 

在 列表 中 ,如 果 有 news 的 数据 就 把 它 输出 到 的 ListView 列表 中 ,如 果 没 有 任何 news 
可 以 显示 其 他 的 内 容 。 例 如 使 用 文本 替代 ,所 以 在 ListView 中 可 以 实现 根据 某 些 条 件 的 不 
同 而 来 显示 不 同 的 内 容 ,我们 可 以 通过 多 种 方式 来 实现 这 一 点 。 

最 快 的 方式 就 是 在 News 小 部 件 中 的 build() 方 法 中 做 修改 。 这 里 可 以 检查 属性 news 
的 长 度 , 如 果 news 的 长 度 大 于 0, 输 出 列表 ,和 否则 返回 需要 显示 的 小 部 件 , 这 里 我 们 显示 居 
中 的 文字 ,代码 如 下 : 


// Chapter05/05 - 03/1ib/news. dart 


if (news. length> 0) { // 如 果 news 的 长 度 大 于 0 


return Expanded( 
child:ListView. builder( // 返回 builder 构建 的 列表 


itemBuilder: buildNewItem, 
itemCount: news. length, 
),); 
} else{ 
return Center(child: Text(' 没 有 找到 news')); // 居中 的 文字 
} 


保存 并 重启 ,会 发 现 居中 文字 显示 出 来 了 ,如 果 添 加 一 个 news 就 到 了 一 个 列表 。 以 上 
就 是 使 用 条 件 来 泻 染 的 列表 。 如 果 条 件 简单 这 样 编写 就 可 以 ,如 果 条 件 复杂 可 以 使 用 另外 
一 种 方式 。 下 一 节 介 绍 根据 条 件 泻 染 列表 的 替代 方案 。 


5.4 根据 条 件 泻 染 内 容 的 替代 方案 3 


a 

我 们 可 以 在 任何 地 方 编写 ListView 需要 返回 的 小 部 件 ， 例 如 在 匡 呈 和 

build() 方 法 中 定义 一 个 小 部 件 变量 newsCard, 这 不 是 类 中 的 一 个 属性 ,只 ”视频 讲解 
是 一 个 方法 内 部 的 变量 ,所 以 只 能 在 这 个 方法 内 部 使 用 它 ,代码 如 下 : 


// Chapter05/05 - 04/1ib/news. dart 
@override 
Widget build(BuildContext context) { // News 小 部 件 的 build() 方 法 
Widget newsCard; 
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给 它 一 个 默认 值 ,把 居中 的 文字 赋 给 它 ,然后 添加 一 个 庄 判 断 语句 ,代码 如 下 : 


// Chapter05/05 - 04/1ib/news. dart 


@override 
Widget build(BuildContext context) { 
Widget newsCard; 


newsCard = Center(child: Text(' 没 有 找到 news')); 


证 (news. length> 0) { 
newsCard = Expanded( 

child: ListView. builder( 
itemBuilder: buildNewItem, 
itemCount: news. length, 

), 

妹 

} 
return newsCard; 


} 


// build() 方 法 

// 添加 小 部 件 变量 
// 默认 值 

// 如 果 news 中 有 数据 
// 占 满 剩余 空间 

// 创建 ListView 列表 
// 构建 每 个 元 素 

// news 中 元 素 的 数量 


// 返回 小 部 件 变 量 


还 可 以 再 优化 一 下 代码 ,如 果 这 里 是 一 个 复杂 的 小 部 件 树 ,有 一 个 更 好 的 方案 来 创建 小 
部 件 。 在 类 中 添加 一 个 创建 小 部 件 的 方法 ,例如 命名 为 buildNewsList, 代 码 如 下 : 


// Chapter05/05 - 04/1ib/news. dart 
Widget buildNewsList() { 
Widget newsCard; 


newsCard = Center(child: Text(' 没 有 找到 news')); 


if (news.length> 0) { 
newsCard = Expanded( 

child: ListView. builder( 
itemBuilder: buildNewItem, 
itemCount: news. length, 

), 

); 

} 
return newsCard; 


} 


// build() 方 法 

// 添加 小 部 件 变量 
// 默认 值 

// 如 果 news 中 有 数据 
// 占 满 剩余 空间 

// 创建 ListView 列表 
// 构建 每 个 元 素 

// news 中 元 素 的 数量 


// 返回 小 部 件 变量 


方法 名 以 build 开头 ,表示 返回 一 个 小 部 件 ,就 像 类 中 的 build() 方 法 一 样 。 方 法 体 中 可 
以 剪 切 Widget build(BuildContext context) {} 中 的 代码 ,这 样 在 build() 方 法 中 我 们 只 需要 


返回 buildNewsList() 方 法 的 返回 值 ,代码 如 下 : 


// Chapter05/05 - 04/1ib/news. dart 


@override 


Widget build(BuildContext context) { 


// 小 部 件 中 的 build() 方 法 
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return buildNewsList(); // buildNewsList 的 返回 值 
} 


这 里 返回 的 是 buildNewsList() 方 法 的 执行 结果 ,在 每 次 重新 构建 的 时 候 都 会 调用 
buildNewsList() 方 法 ,更 新 的 时 候 就 可 以 看 到 变化 。 这 样 小 部 件 News 的 build() 方 法 更 清 
蜥 了。 如 果 想 再 添加 一 些 其 他 小 部 件 , 可 以 在 buildNewsList() 中 添加 ,这 样 build() 方 法 就 
会 一 直 很 清晰 ,也 可 以 进入 到 buildNewsList() 方 法 中 ,查看 方法 里 具体 写 了 什么 内 容 。 


5.5 总 结 


ld 
本 章 我 们 学 习 了 泻 染 列表 ,以 及 根据 条 件 显示 内 容 。Column 小 部 件 试 ” 国 称 有 起 和 
图 把 所 有 的 内 容 都 挤 在 一 个 页 面 上 显示 ,如 果 在 页 面 上 有 一 列 , 那 么 这 个 列 ”视频 讲解 
就 占据 一 个 页 面 ,并 试图 把 所 有 的 内 容 都 挤 在 这 列 中 。ListvView 可 以 这 
染 一 个 可 滚动 的 列表 ,但 是 要 确保 它 被 包含 在 一 个 有 特定 高 度 的 Container 中 或 是 一 个 
Expanded 小 部 件 中 。ListvView 可 以 使 用 默认 构造 器 ,并 给 children 参数 赋值 ,来 创建 列 
表 。 如 果 列 表 很 长 或 者 是 一 个 动态 的 列表 ,需要 使 用 ListView 中 的 builder 构造 器 构建 列 
表 , 这 种 方式 可 以 创建 动态 的 高 性 能 列表 。 对 于 条 件 内 容 可 以 使 用 三 元 表达 式 或 者 其 他 条 
件 语 句 , 注 意 小 部 件 的 返回 值 不 能 为 空 , 可 以 用 一 个 空 的 Container 来 代替 。 


Flutter 页 面 导 航 


本 章 我 们 将 学 习 页 面 导航 ,App 几乎 不 可 能 在 一 个 页 面 上 解决 所 有 问题 。 例 如 App 有 
一 个 列表 页 面 , 单 击 其 中 的 某 一 条 记录 ,应 该 跳 转 到 一 个 详情 页 ,所 以 App 需要 实现 一 个 单 
独 的 页 面 来 展示 详情 内 容 , 或 者 在 页 面 底部 添加 按钮 或 图 标 来 切换 页 面 。 本 章 将 学 习 如 何 
构建 导航 、 页 面 之 间 的 切换 ,以 及 如 何 向 前 一 个 页 面 传递 数据 和 向 后 一 个 页 面 传递 数据 。 为 
了 提高 学 习 效 率 , 作 者 提供 整套 学 习 视 频 , 了 解 详情 请 浏览 网 站 http://www. x7data. com。 


6.1 在 App 中 添加 多 个 页 面 


我 们 以 一 个 简单 的 例子 开始 ,首先 需要 创建 多 个 页 面 ,现在 的 App 中 只 有 一 个 页 面 ,这 
个 页 面 通过 Scaffold 创建 ,然后 在 Scaffold 中 再 创建 需要 显示 的 所 有 内 容 ,包括 导航 栏 
AppBar .导航 栏 下 面 的 内 容 body。 代 码 如 下 : 


// eosheee 01/1lib/main. dart 


home: Scaffold( // 当前 App 中 的 唯一 页 面 
appBar: AppBar( // 导航 栏 
title: Text( "资讯 标题 ')， // 导航 栏 中 的 标题 
), 
body: NewsManager(), // 导航 栏 下 面 的 按钮 和 列表 ListView 


), 


如 果 要 加 载 一 个 新 的 页 面 ,需要 创建 一 个 小 部 件 。 为 了 方便 理解 ,可 以 在 main. dart 所 
在 目录 创建 一 个 新 的 目录 ,并 把 它 命 名 为 pages, 这 个 名 称 可 以 根据 需要 自 定义 。pages 目 
录 将 保存 应 用 中 的 页 面 。 

在 pages 目录 下 创建 home. dart 文件 ,在 home. dart 文件 中 引入 包 , 创 建 一 个 类 
HomePage 继承 StatelessWidget, 因 为 这 里 不 需要 管理 任何 状态 。 下 一 步 添加 build( ) 方 
法 ,在 build() 方 法 中 返回 main. dart 中 参数 body 的 值 , 因为 Scaffold 中 使 用 了 
NewsManager 小 部 件 ,需要 引入 news_manager. dart 文件 ,news_manager. dart 不 在 目录 
pages 下 ,所 以 使 用 . . /news_manager. dart 引入 。 代 码 如 下 : 


// Chapter06/06 - 01/1ib/pages/home. dart 
import 'package:flutter/material. dart'; 
import '. . /news_manager. dart'7 
class HomePage extends StatelessWidget { 
@override 
Widget build(BuildContext context) { 
return Scaffold( 
appBar: AppBar( 
title: Text( ' 资 讯 标题 ')， 
), 
body: NewsManager(), 
); 
} 
} 
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// 引入 material 包 
// 引入 NewsManager 小 部 件 
// 创建 HomePage 页 面 


// 覆盖 build() 方 法 
// 返回 Scaffold 页 面 
// 添加 导航 栏 

// 导航 栏 标题 


// 返回 按钮 和 列表 


在 main. dart 文件 中 ,需要 引入 HomePage 页 面 ,代码 如 下 : 


import '. /pages/home. dart'; 


// 引 入 HomePage 页 面 


在 MaterialApp 的 参数 body 后 面 添 加 HomePage() ,代码 如 下 : 


// Chapter06/06 - 01/1ib/main. dart 


return MaterialApp( 
theme: ThemeData( 
primaryColor: Colors. deepOrange, 
accentColor: Colors. deepOrange, 
brightness: Brightness. light, 
), 
home: HomePage(), 
); 


// 返回 根 小 部 件 
// 设置 主题 

// 主题 颜色 

// 强调 色 

// 主题 亮度 


// 主页 面 
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保存 并 运行 一 下 ,模拟 器 显示 和 之 前 一 样 ,但 是 单 击 列表 中 的 某 一 条 记录 能 导航 到 新 的 


页 面 那 就 更 好 了 。 下 一 节 我 们 看 看 怎样 实现 。 


6.2 给 导航 页 面 添加 按钮 


在 news. dart 文件 中 ,找到 创建 Card 的 地 方 ,添加 一 个 按钮 ButtonBar。ButtonBar 允 


// Chapter06/06 - 02/1ib/news. dart 
// News 小 部 件 构 建 列表 元 素 的 方法 
Widget buildNewItem(context, index) { 


许 添 加 多 个 按钮 并 且 以 很 好 的 方式 排列 , 它 有 一 个 children 参数 。 在 children 的 小 部 件数 
组 中 添加 一 个 按钮 FlatButton。FlatButton 是 一 个 没有 背景 色 的 按钮 , 它 有 一 个 child 参 
数 ,把 Text( "详情 ') 赋 值 给 它 ,然后 添加 一 个 单 击 事件 ,暂时 用 一 个 空 方法 ,代码 如 下 : 
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return Card( // 返回 Card 小 部 件 
child: Column( // Card 中 的 列 
children: < Widget >[ // Card 中 列 小 部 件 
Image.asset( 'assets/newsl1. jpg'), // Card 中 的 图 片 
Text (news[ index]), // 图 片 下 面 的 文字 
ButtonBar( // 按钮 栏 
children: < Widget>[ // 按钮 栏 中 的 子 部 件 
FlatButton( // 没有 背景 色 的 按钮 
child: Text(' 详 情 ')， // 按钮 上 的 文字 
onPressed: () {}, // 按钮 上 的 单 击 事件 


), 


图 6.1 Card 中 显示 详情 按钮 
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居中 显示 ,可 以 在 ButtonBar 配置 参数 alignment, 代 码 如 下 所 示 : 

alignment: MainAxisAlignment. center, // 使 ButtonBar 中 按钮 居中 显示 

现在 单 击 没 有 任何 反应 。 我 们 在 pages 目录 下 创建 一 个 新 的 页 面 news_detail. dart, 引 
入 material 包 , 创建 类 NewsDetailPage 继承 StatelessWidget, 在 buid() 方 法 中 返回 
Scaffold 作为 一 个 新 的 页 面 。 注意 NewsDetailPage 不 是 HomePage 的 一 部 分 ,然后 给 
NewsDetailPage 页 面 添加 导航 栏 AppBar, 标 题 显示 “详情 ”,body 中 可 以 显示 一 行 居中 的 文 
字 “ 资 讯 详 情 页 ”, 代 码 如 下 : 

// Chapter06/06 - 02/1ib/pages/news_detail. dart 


import 'package:flutter/material. dart'; // 引入 material 包 


class NewsDetailPage extends StatelessWidget { // 创建 详情 页 


@override 
Widget build(BuildContext context) { // 详情 页 中 的 build() 方 法 
return Scaffold( // 返回 页 面 
appBar: AppBar(title: Text( ' 详 情 '),)， // 页 面 标题 


body: Center(child: Text(' 资 讯 详情 页 '), )， // 页 面 内 容 
); 
} 
} 


下 一 节 学 习 如 何 导航 到 这 一 详情 页 。 
6.3 实现 基本 导航 功能 


详情 页 面 创建 好 了 ,下 面 可 以 通过 单 击 Card 中 的 “详情 ”按钮 来 切换 页 面 。 在 News 小 
部 件 中 , 单 击 “ 详 情 ?按钮 时 需要 执行 一 些 代 码 , 因 为 只 需要 执行 一 行 代码 ,所 以 可 以 使 用 等 
号 加 箭头 方式 编写 。 可 以 使 用 Flutter 自 带 的 Navigator, 它 是 flutter/material. dart 包 中 附 
带 的 。context 管理 导航 的 范围 ,context 知道 现在 我 们 在 哪个 页 面 , 也 知道 如 何 导航 ,所 以 
它 是 Navigator 中 必须 的 。 

在 main. dart 中 我 们 创建 了 MaterialApp。MaterialApp 是 导航 的 重要 部 分 , 它 能 设置 
页 面 导航 ,所 以 单 击 “ 详 情 ” 按 钮 的 监听 事件 不 能 只 使 用 Navigator, 因 为 News 小 部 件 被 包 
含 在 MaterialApp 中 ,同样 HomePage 的 导航 也 被 包含 在 MaterialApp 中 。 

在 Navigator 后 面 加 点 ,IDE 会 给 出 提示 ,通常 如 果 想 加 载 一 个 新 的 页 面 可 以 使 用 push() 
方法 ,代码 如 下 所 示 : 


Navigator. push(context, route) // 压 入 一 个 页 面 


push() 方 法 可 以 压 入 一 个 页 面 ,那么 为 什么 是 压 入 页 面 呢 ? 因为 这 是 由 在 Flutter 中 导 
航 的 结构 栈 决定 的 。 假 设 有 两 个 页 面 : 资讯 列表 页 面 和 资讯 详情 页 面 ,我 们 希望 在 它们 之 


76 二 Flutter 实 战 指南 


间 切 换 , 可 以 通过 压 人 页 面 和 弹出 页 面 来 实现 。 页 面 被 栈 管理 ,我们 看 到 的 页 面 是 页 面 栈 中 
最 上 面 的 页 面 ,使 用 压 入 的 方式 可 以 向 栈 中 添加 更 多 的 页 面 。 同 时 也 可 以 通过 弹出 栈 中 的 
页 面 来 实现 返回 到 之 前 的 页 面 。 

我 们 看 见 的 一 定 是 最 上 面 的 页 面 , 所 以 可 以 一 直 弹 出 ,直到 只 剩 一 个 页 面 。 以 上 就 是 页 
面 导航 的 工作 原理 。 我 们 使 用 的 是 栈 结构 ,所 以 这 里 可 以 使 用 push() 方 法 把 一 个 页 面 压 人 
到 栈 ,那么 需要 把 什么 压 进去 呢 ? 这 里 不 可 以 压 人 一 个 页 面 , 需 要 压 人 的 是 路 径 route。 
route 不 是 显示 的 内 容 , 而 是 Flutter 需要 知道 的 一 些 信息 。 把 MaterialPageRoute 传人 , 代 
码 如 下 : 


// Chapter06/06 - 03/1ib/news. dart 


onPressed: () => Navigator. push( //“ 详 情 ” 按 钮 单 击 事件 
context, // 上 下 文 context 
MaterialPageRoute( ), // 路 径 


), 


MaterialPageRoute 包含 路 径 , 例 如 从 一 个 页 面 跳 转 到 另 一 个 页 面 的 动画 效果 ,push() 
方法 不 仅 需 要 传人 路 径 , 还 需要 另外 一 个 参数 作为 位 置 参数 中 的 第 一 个 参数 context。 
context 包含 有 关 页 面 的 重要 信息 , 它 保留 着 整个 应 用 环境 中 的 页 面 的 位 置 ,Navigator 需要 
这 些 信息 以 便 正确 地 创建 一 个 新 的 页 面 ,并 从 当前 页 面 导 航 到 新 的 页 面 。 

MaterialPageRoute 也 是 Navigator 所 需要 的 ,MaterialPageRoute 告诉 Navigator 哪个 
页 面 应 该 被 压 人 。 在 MaterialPageRoute 中 传人 builder 参数 ,builder 是 一 个 方法 参数 ,也 
需要 接收 context 参数 ,context 的 类 型 是 BuildContext。 下 面 需 要 做 的 是 有 关 页 面 的 ， 
builder 的 方法 将 返回 一 个 小 部 件 , 然 后 MaterialPageRoute 被 告知 准备 构建 此 页 面 ,并 导航 
到 它 , 所 以 这 里 需要 引入 这 个 页 面 。pages 目录 下 的 news_detail. dart, 代 码 如 下 所 示 : 


import '. /pages/news_detail. dart'; // 引 入 详情 页 
在 builder 这 里 ,把 NewsDetailPage 实例 化 ,代码 如 下 : 


// Chapter06/06 - 03/1ib/news. dart 


FlatButton( // 无 背景 色 按钮 


child: Text(' 详 情 ')， // 按钮 上 的 文字 
onPressed: () => Navigator.push( // 导航 压 入 页 面 
context, HA 上下文 
MaterialPageRoute(builder: (context){ // 创建 路 径 
return NewsDetailPage( ); // 导航 到 目标 页 面 


])， 
), 


在 push() 方 法 中 我 们 添加 了 一 个 新 的 路 径 ,而 不 是 压 入 页面。 路径 表示 怎样 构建 一 个 
新 的 页 面 。 保 存 并 重启 应 用 , 单 击 列表 中 的 “详情 ”按钮 ,可 以 导航 到 详情 页 面 ,详情 页 面 项 
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部 有 一 个 返回 按钮 , 它 不 是 我 们 编写 的 ,而 是 Flutter 自 带 的 ,如 图 6.2 所 示 。 


图 6.2 带 返回 按钮 的 详情 页 


单 击 返回 按钮 可 以 返回 到 之 前 的 页 面 。 我 们 也 可 以 在 详情 页 面 中 添加 一 个 按钮 来 实现 
返回 功能 ,在 文本 下 面 添 加 一 个 按钮 ,按钮 中 添加 单 击 事件 , 单 击 的 监听 方法 中 使 用 
Navigator. pop(context) ,pop() 方 法 是 Flutter 自 带 的 返回 按钮 所 使 用 的 方法 。pop() 方 法 
也 需要 context 参数 ,代码 如 下 : 


// Chapter06/06 - 03/1ib/pages/news_detail. dart 


body: Column( // 详 情 页 中 的 列 


children: < Widget >[ // 列 中 的 子 部 件 
Center( 
child: Text( ' 资 讯 详情 页 ')， // 居中 显示 的 文字 
)， 
RaisedButton( // 返回 按钮 
child: Text(' 返 回 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 上 的 单 击 事件 


Navigator. pop( context); // 将 本 页 面 从 导航 栈 中 弹出 ,返回 之 前 的 页 面 
}, 
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) 
])， 


这 样 就 实现 了 返回 功能 。 


6.4 优化 详情 页 面 


在 详情 页 news_detail. dart 页 面 中 ,优化 一 下 显示 的 内 容 。 例 如 居中 显示 body 中 的 内 
容 ,body 使 用 了 Column, Column 有 两 个 对 齐 参 数 分 别 是 mainAxisAlignment 和 
crossAxisAlignment。 在 列 Column 中 ,mainAxisAlignment 表示 从 上 到 下 的 对 齐 方式 , 即 
垂直 对 齐 方式 ;crossAxisAlignment 表示 从 左 到 右 的 对 齐 方式 , 即 水 平 对 齐 方式 。 这 里 输入 
mainAxisAlignment 把 鼠标 悬 停 在 上 面 会 有 提示 ,如 图 6. 3 所 示 。 


{MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start} 


Creates a vertical array of children. 


The [direction], [mainAxisAlignment], [mainAxisSize], [crossAxisAlignment], and 
[verticalDirection] arguments must not be null. If [crossAxisAlignment] is 
[CrossAxisAlignment.baseline], then [textBaseline] must not be null. 


The [textDirection] argument defaults to the ambient [Directionality], if any. If there is no 
ambient directionality, and a text direction is going to be necessary to disambiguate 
tart or i values for the [crossAxisAlignment], the [textDirection] must not be null. 


图 6.3 mainAxisAlignment 的 提示 


可 以 设置 mainAxisAlignment: MainAxisAlignment. center ,保存 后 ,body 中 的 内 
在 垂直 方向 居中 显示 了 ,再 设置 crossAxisAlignment: CrossAxisAlignment. center, 保 存 后 
发 现 内 容 并 没有 水 平 居中 显示 ,这 是 因为 Column 的 宽度 只 会 根据 内 容 的 宽度 来 显示 。 要 
解决 这 个 问题 ,在 Text( ' 资 讯 详情 页 "外面 加 一 个 Center 小 部 件 即 可 。 

如 果 在 详情 页 显示 图 片 , 可 以 使 用 Image. asset('assets/newsl. jpg') 方 法 添加 一 张 图 
片 ,这 里 使 用 的 是 硬 编码 。 如 果 想 让 图 片 显示 在 顶部 ,需要 去 掉 mainAxisAlignment 这 个 
参数 。 现 在 给 这 些小 部 件 加 一 些 间 距 , 在 Text(' 资 讯 详 情 页 ') 外 面 加 一 个 Container 小 部 
件 , 设 置 padding 参数 ,代码 如 下 : 


// Chapter06/06 - 04/1ib/pages/news_detail. dart 


Container( 
padding: EdgeInsets.all(10), // 设置 内 边 距 , 所 有 边 距 为 10 像素 
child: Text(' 资 讯 详情 页 ')， // 详情 页 中 的 文字 


), 
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这 样 我 们 就 创建 好 间距 了 ,再 给 按钮 设置 颜色 ,代码 如 下 : 


// chapter06/06 - 04/1ib/pages/news_detail. dart 


RaisedButton( // 详情 页 的 返回 按钮 


color: Theme. of (context) . accentColor, // 按钮 颜色 使 用 主题 颜色 
child: Text(' 返 回 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 的 单 击 事件 
Navigator. pop( context); // 弹出 本 页 面 
}, 
) 
下 节 我 们 将 学 习 如 何 传递 数据 。 


6.5 通过 Push 给 页 面 传递 数据 


详情 页 NewsDetailPage 是 静态 的 ,怎样 传递 动态 数据 给 它 呢 ? 在 News 小 部 件 中 ， 
MaterialPageRoute 是 传递 数据 最 好 的 地 方 , 因 为 这 里 使 用 构造 器 方法 创建 了 
NewsDetailPage, 所 以 可 以 把 数据 放 到 构造 器 里 ,然后 在 NewsDetailPage 中 添加 一 个 构造 
器 ,并 添加 一 些 属 性 来 保存 数据 。 

在 本 例 中 使 用 title 和 imageUrl 保存 标题 和 图 片 ,在 构造 器 参数 中 传人 this. title 和 
this. imageUrl, 代 码 如 下 : 


// Chapter06/06 - 05/1ib/pages/news_detail. dart 
class NewsDetailPage extends StatelessWidget { // 详情 页 


final String title; // 标题 
final String imageUrl; // 图 片 


NewsDetailPage({this.title,this. imageUrl}); // 命名 构造 器 


然后 在 AppBar 的 Text 中 使 用 title 属性 ,在 body 中 的 Image. asset() 中 使 用 
imageUrl 属性 。 现 在 还 没有 给 NewsDetailPage 传递 数据 ,在 news. dart 文件 中 ,属性 final 
List< String > news 的 数据 是 从 外 部 获取 的 ,可 以 把 这 组 news 中 的 记录 传递 给 
NewsDetailPage。 这 组 news 数据 保存 在 NewsManager 中 ,类 型 是 字符 串 数组 ,满足 不 了 
当前 的 需求 ,我 们 需要 的 是 一 个 复杂 的 对 象 ,包含 标题 和 图 片 。 

在 Dart 中 ,有 一 种 数据 结构 叫 Map, 它 可 以 保存 多 条 信息 ,把 Map 设置 为 列表 的 泛 型 ， 
代码 如 下 : 


List <Map < String, String>> news = []; // Map 类 型 的 列表 
NewsManager 中 的 _addNews() 方 法 参数 类 型 需要 改 为 Map, 代 码 如 下 : 


// chapter06/06 - 05/1ib/news_manager. dart 
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void _addNews(Map news) { // 添加 news 的 方法 
setState(() { // 调用 setState() 方 法 
_news. add(news); // 添加 news 


D; 
} 


startingNews 也 需要 改 成 Map 类 型 。 代 码 如 下 : 
final Map startingNews; // 初 始 化 的 news 


在 news_control. dart 中 ,需要 把 传人 参数 类 型 改 成 Map 类 型 ,可 以 使 用 {} 给 Map 赋 
值 ,{} 中 使 用 键 值 对 , 键 一 般 是 String 类 型 ,代码 如 下 : 


// Chapter06/06 - 05/1ib/news_control. dart 


onPressed: () { 

// 使 用 硬 编码 的 方式 给 Map 赋值 ,包含 键 'title' 和 键 'image' 
addNews({ 'title': 'other', 'image': 'assets/newsl1. jpg'}); 
}, 


这 样 就 实现 了 使 用 多 条 信息 的 复杂 对 象 来 创建 news。 
在 news. dart 文件 中 ,我 们 也 需要 把 List 的 类 型 改 为 Map 类 型 。 代 码 如 下 : 


final List < Map < String, String >> news; //News 小 部 件 中 的 属性 


泛 型 中 第 一 个 表示 的 是 key 的 类 型 ,第 二 个 代表 值 的 类 型 ,如 果 值 的 类 型 是 多 样 化 的 ， 
可 以 使 用 dynamic 表示 。 

在 news. dart 文件 中 ,怎样 访问 Map 中 的 值 呢 ? 可 以 在 index 后 面 加 上 [],[j 中 添加 单 
引号 , 单 引号 中 是 key, 代 码 如 下 : 


// Chapter06/06 - 05/1ib/news. dart 
Text( // ListView 中 的 标题 


news[ index]['title']， // 标 题 上 的 文字 
) 


现在 需要 把 标题 和 图 片 传 给 新 的 页 面 NewsDetailPage, 代 码 如 下 : 


// Chapter06/06 - 05/1ib/news. dart 


MaterialPageRoute(builder: (context) { // 导航 路 径 


return NewsDetailPage( // 详情 页 面 
title: news[ index][ 'title'], // 传人 标题 


imageUr1: news[ index][ 'iamge'], // 传人 图 片 
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); 
D, 


这 样 就 完成 了 数据 的 传递 。 重 启 应 用 后 , 单 击 * 详 情 ?发 现 数据 已 经 传递 过 来 了 ,如 图 
6.4 所 示 。 


图 6.4 数据 已 传人 到 详情 页 面 


那么 弹出 页 面 怎样 传 值 呢 ? 下 一 节 将 详细 讲解 。 


6.6 通过 Pop 获取 页 面 返回 的 数据 


弹出 页 面 怎样 传 值 呢 ? 在 NewsDetailPage 中 已 经 定义 了 一 个 返回 按钮 ,代码 如 下 : 


onPressed: () { 
Navigator. pop(context); // 弹出 详情 页 面 


} 


当 单 击 详情 页 中 的 返回 按钮 时 ,可 以 在 pop() 方 法 中 传人 第 二 个 参数 ,这 个 参数 可 以 是 
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任何 类 型 ,例如 数字 类 型 .字符 串 类 型 .布尔 类 型 等 ,我 们 这 里 返回 true 表示 操作 成 功 。 代 
码 如 下 : 


Navigator. pop(context, true); // 返 回 数据 true 


在 news. dart 文件 中 ,导航 路 径 MaterialPageRoute 可 以 监听 返回 结果 ,在 push() 
后 面 将 返回 一 个 Future 类 型 的 对 象 。Future 是 一 个 等 待 状态 对 象 , 它 最 终 在 将 来 的 某 
间 执 行 ,所 以 可 以 监听 它 执行 的 那 一 刻 。 就 像 在 日 历 中 添加 一 些 提 醒 ,我 们 不 知道 si 
确切 时 间 , 但 在 提醒 发 生 时 收 到 提示 。Future 是 一 个 允许 监听 未 来 事件 的 对 象 。 这 里 可 以 
加 then() 方 法 。then() 方 法 在 Future 返回 时 被 调用 ,代码 如 下 : 


// Chapter06/06 - 06/1ib/news. dart 


onPressed: () => Navigator. push( // 监听 单 击 事件 


context, A/ 上 于 文 
MaterialPageRoute(builder: (context) { // 导航 路 径 
return NewsDetailPage( // 返回 详情 页 
title: news[ index][ 'title'], // 传人 标题 
imageUr1: news[ index][ 'image'], // 传人 图 片 
) 
})， 


) .then(onValue) // 监听 返回 到 当前 页 面 事件 


then() 方 法 需要 一 个 参数 ,这 个 参数 是 一 个 方法 ,表示 事件 发 生 时 可 以 执行 一 些 内 容 。 
方法 中 有 一 个 参数 a 参数 值 。 当 鼠标 悬 停 在 push() 方 法 上 时 你 可 以 看 
到 返回 值 是 Future 类 型 ,还 有 泛 型 ,如 图 6.5 所 示 。 


onPressed: () => Navigator.push( 


Future<T> push<T extends Object>(BuildContext context，Route<T> ro 
3 


package:flutter/src/widgets/navigator.dart 


Push the given route onto the navigator that most tightly encloses the given context. The 
new route and the previous route (if any) are notified (see [Route.didPush] and 
[GA Tl Ee If the [Navigator] has any [Navigator.observers], they will be 
notified as well (see [NavigatorObserverdidPush]). 


Ongoing gestures within the current route are canceled when a new route is pushed. 


u Returns a [Future] that completes to the re value passed to [pop] when the 
Mi，pushed route is popped off the navigator. 


图 6.5 push() 方 法 返回 类 型 


value 可 以 是 任何 类 型 的 值 ,在 本 例 中 value 的 类 型 是 布尔 型 ,因为 在 调用 pop() 方 法 时 
返回 的 是 布尔 类 型 ,但 是 Dart 语言 并 不 知道 返回 的 是 什么 类 型 。 可 以 在 push 后 面 加 一 个 
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泛 型 布尔 ,这 样 便 明确 了 返回 值 的 类 型 。 我 们 把 返回 信息 打印 出 来 ,看 是 否 生效 。 代 码 
如 下 : 


// Chapter06/06 - 06/1ib/news. dart 


onPressed: () => Navigator.push< bool >( // 添加 返回 值 为 泛 型 


) .then( (value){ // 监听 返回 到 当前 页 面 事件 并 执行 方法 
print(value); // 打印 返回 的 值 


D), 


单 击 * 详 情 ”, 再 单 击 * 返 回 ?按钮 ,控制 台 打 印 了 这 个 值 。 我 们 可 以 通过 返回 的 这 个 值 来 
删除 这 条 news, 在 news_manager. dart 中 ,现在 没有 删除 news 列表 数据 的 方法 ,需要 添加 
一 个 _deleteNews() 方 法 ,代码 如 下 : 


// Chapter06/06 - 06/1ib/news_manager. dart 


void deleteNews(int index){ // 删除 列表 中 索引 对 应 的 news 


SetState(() { // 更 新 列表 
_news. removeRt( index) ; // 执行 删除 操作 
)) 
} 
参数 使 用 的 是 news 在 列表 中 的 索引 ,然后 调用 setState() 方 法 。 方 法 体 中 是 删除 索引 


对 应 的 那 条 记录 。 在 News 小 部 件 中 ,添加 一 个 方法 属性 ,代码 如 下 : 


// Chapter06/06 - 06/1ib/news. dart 


class News extends StatelessWidget { // News 小 部 件 
final List <Map < String，String>> news; // news 属性 
final Function deleteNews; // 删除 news 的 方法 


News({this. news, this. deleteNews} ); // 命名 构造 器 


在 news_manager. dart 的 build() 方 法 中 ,添加 命名 参数 ,代码 如 下 : 


// Chapter06/06 - 06/1ib/news_manager. dart 


@override 


Widget build(BuildContext context) { // 构建 方法 
return Column( // 列 小 部 件 
children: <Widget >[ 
NewsControl(_addNews), // 添加 “资讯 ”按钮 
News( // 资讯 列表 


news: _news, 
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deleteNews: _deleteNews, 
)， 
]， 
) 
然后 在 News 小 部 件 的 then() 方 法 中 ,用 庄 判 断 value 的 值 ,代码 如 下 : 


// chapter06/06 - 06/1ib/news. dart 


.then( (value){ // value 是 pop() 方 法 返回 的 值 


if(value){ // 判断 value 的 值 
deleteNews( index); // 如 果 为 true 在 列表 页 删除 这 条 记录 


} 
}), 


这 样 就 通过 Navigator 的 pop() 方 法 传 回 了 一 个 值 。 
6.7 给 导航 页 面 中 的 按钮 添加 单 击 事件 


上 一 节 我 们 学 习 了 如 何在 弹出 页 面 后 给 之 前 的 页 面 返回 数据 ,但 是 如 果 单 击 Android 
设备 中 的 返回 按钮 就 会 报错 ,提示 布尔 类 型 不 能 为 空 。 当 单 击 设备 的 返回 按钮 或 者 自 带 的 
返回 按钮 时 ,可 以 在 NewsDetailPage 中 做 一 些 事情 ,在 Scaffold 外 面 添加 另外 一 个 小 部 件 
来 监听 返回 按钮 单 击 事件 ,这 个 小 部 件 叫 WillPopScope, 它 是 一 个 很 有 用 的 小 部 件 。 代 码 
如 下 : 


// Chapter06/06 - 07/1ib/pages/news_detail. dart 


return WillPopScope( // 用 11PopScope 包装 Scaffold 页 面 
child: Scaffold( // Scaffold 页 面 


定义 一 个 child, 值 是 Scaffold 页 面 。 弹 出 过 程 的 所 有 信息 WillPopScope 都 能 监听 到 ， 
还 需要 加 一 个 参数 onWillPop, 它 是 一 个 方法 , 当 用 户 离 开 这 个 页 面 的 时 候 执 行 这 个 方法 ， 
代码 如 下 : 


// Chapter06/06 - 07/1ib/pages/news_detail. dart 


return WillPopScope( 
onWillPop: (){ // 弹出 当前 页 面 时 调用 


}, 
child: Scaffold( 
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方法 体 中 必须 人 为 地 执行 某 些 内 容 , 例 如 调用 Navigator. pop (context, false), 同时 
onWillPop() 方 法 需要 返回 Future < bool > 类 型 的 值 ,所 以 需要 添加 返回 值 ,代码 如 下 : 


// chapter06/06 - 07/1ib/pages/news_detail. dart 


onWillPop: (){ 

Navigator. pop(context, false); // 执行 弹出 内 容 

return Future. value(false); // 返回 Future < bool > 的 值 
} 


这 样 我 们 可 以 通过 弹出 页 面 的 返回 值 来 判断 是 单 击 设备 的 返回 按钮 还 是 自 带 的 返回 按 
钮 ,或 者 是 单 击 页 面 上 的 返回 按钮 。 用 户 通 过 单 击 设备 的 返回 按钮 返回 或 者 单 击 顶部 的 按 
钮 返回 时 ,将 返回 false。Future. value(false) 表 示 只 弹出 一 个 页 面 。 如 果 返 回 是 true 的 话 ， 
页 面 将 会 继续 弹出 ,直到 没有 页 面 可 以 弹出 为 止 。 


6.8 添加 登录 页 面 并 切换 页 面 


有 时 我 们 需要 压 人 一 个 新 的 页 面 , 同 时 替换 掉 存 在 的 那个 页 面 , 表 示 不 需要 返回 到 之 前 
的 页 面 。 例 如 在 权限 验证 的 时 候 会 用 到 这 样 的 场景 , 当 用 户 登 录 成 功 时 ,直接 用 主页 面 蔡 换 
掉 登 录 页 面 。 在 pages 目录 下 新 建 一 个 auth. dart ,同样 需 要 引入 material 包 , 创 建 一 个 
AuthPage 继承 StatelessWidget, 创 建 build() 方 法 返回 Scaffold 页 面 。 在 AppBar 中 添加 登 
录 标 题 ,在 body 中 添加 一 个 居中 的 登录 按钮 ,给 按钮 添加 一 个 单 击 事件 。 如 果 单 击 这 个 按 
钮 则 导航 到 主页 。 我 们 把 home. dart 重 命名 为 news_list. dart, 把 类 名 改 为 NewsListPage， 
同样 我 们 在 main. dart 文件 中 替换 成 正确 的 名 称 。 在 main. dart 中 ,home 参数 对 应 的 小 部 
件 应 该 是 登录 页 面 ,代码 如 下 : 


home: AuthPage(), // 登 录 页 面 


在 auth. dart 文件 中 ,如 果 单 击 “登录 ”需要 转 到 NewsListPage 页 面 ,所 以 登录 页 面 是 
第 一 个 页 面 。 如 果 用 户 登录 成 功 会 加 载 男 外 一 个 页 面 ,所 以 在 顶部 需要 引入 news_list. dart 
这 个 文件 。 在 单 击 事件 方法 中 ,我 们 使 用 Navigator, 如 果 想 替换 掉 已 存在 的 页 面 ,不 使 用 
push 而 是 使 用 pushReplacement ,表示 当前 页 面 完 全 被 替换 掉 。 同 样 需要 传人 context, 然 
后 将 MaterialPageRoute 传人 builder, 这 个 方法 将 返回 一 个 页 面 , 这 里 是 NewsListPage。 
代码 如 下 : 


// Chapter06/06 - 08/1ib/pages/auth. dart 


import 'package:flutter/material. dart'; // 引入 material 
import '. /pages/news_list. dart'; // 引入 NewsListPage 页 面 
class RuthPage extends StatelessWidget { // 创建 登录 页 面 


@override 
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Widget build(BuildContext context) { // 登录 页 面 build() 方 法 
return Scaffold( // 返回 Scaffold 
appBar: AppBar( // 登录 页 面 导航 栏 
title: Text(' 登 录 ')， // 导航 栏 标题 
body: Center( // 居中 显示 
child: RaisedButton( // 登录 按钮 
child: Text(' 登 录 ')， // 按钮 上 的 文字 
onPressed: () { // 登录 事件 


Navigator. pushReplacement (context, 
MaterialPageRoute(builder: (context) { 
return NewsListPage( ); // 导航 到 NewsListPage 页 面 
1D)); 


NewsListPage 页 面 蔡 换 成 功 后 ,会 发 现 NewsListPage 页 面 的 导航 栏 中 没有 返回 按钮 ， 
如 图 6.6 所 示 。 


图 6.6 不 带 返 回 按钮 的 页 面 
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6.9 抽 屠 式 导 航 


Flutter 提供 了 抽 展 式 导航 的 小 部 件 Drawer, 在 news_list. dart 文件 中 ,可 以 添加 一 个 
小 图 标 , 单 击 小 图 标 可 以 导航 到 资讯 管理 页 面 或 者 新 建 资讯 页 面 。 首先 在 news_list. dart 
文件 中 给 它 添加 一 个 抽 层 式 导 航 。 在 Scaffold 小 部 件 中 有 一 个 参数 drawer, 表 示 在 页 面 的 
左 侧 可 以 展现 抽 层 式 导航 页 。 参 数 的 值 是 Flutter 提供 的 小 部 件 Drawer。Drawer 中 有 一 
个 参数 child, child 是 Drawer 显示 的 内 容 , 它 可 以 是 一 列 Column, 也 可 以 是 滚动 的 
ListView。 这 里 使 用 Column, 因 为 目前 不 需要 展示 太 多 内 容 。 

在 Column 中 添加 参数 children, 列 中 的 第 一 个 小 部 件 使 用 AppBar, 然 后 添加 一 个 标题 
并 命名 为 选择”, 在 AppBar 的 下 面 需要 添加 一 些 记录 ,这 里 我 们 使 用 ListTile 小 部 件 , 它 
经 常 在 ListView 中 被 用 到 ,ListTile 是 一 个 整齐 的 小 部 件 , 可 以 拿 来 就 用 。ListTile 有 个 参 
数 title, 可 以 设置 为 文本 Text 小 部 件 。ListTile 是 可 以 被 单 击 的 .有 个 参数 onTap,onTap 
的 值 是 一 个 可 以 单 击 后 执行 的 方法 。 代 码 如 下 : 


// Chapter06/06 - 09/1ib/pages/news_list. dart 


@override 
Widget build(BuildContext context) { 
return Scaffold( 
drawer: Drawer( 
child: Column( 
children: <Widget >[ 


AppBar( 
title: Text( ' 选 择 ')， 
), 
ListTile( 
title: Text( ' 管 理 资讯 ')， 
onTap: (){}, 


J], 
)， 
), 
appBar: AppBar( 
title: Text( ' 资 讯 标题 ')， 
), 
body: NewsManager(), 
); 
i 
} 


// 页 面 的 build() 方 法 
// 返回 Scaffold 页 面 
// 添加 抽 屋 式 导航 


// 抽 层 式 导航 中 的 小 部 件 
// 抽 屠 式 导航 中 的 导航 栏 
// 抽 层 式 导航 中 的 标题 


// 抽 层 式 导航 中 的 一 条 记录 


// 记录 的 标题 
// 单 击 这 条 记录 后 调用 的 方法 


// 资讯 列表 页 面 的 标题 
// 标题 名 称 


// 资讯 列表 的 按钮 
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在 模拟 器 中 看 到 一 个 AppBar, 如 果 单 击 这 个 标题 ,就 可 以 看 到 抽 屠 式 导航 了 ,如 图 6.7 
所 示 。 

AppBar 中 有 一 个 参数 叫 automaticallyImplyLeading, 需 要 把 它 设置 为 false, 这 样 导 航 
标题 的 左 侧 就 不 会 显示 小 图 标 了 ,如 图 6. 8 所 示 。 


图 6.7 抽 导 式 导航 效果 图 6.8 隐藏 抽 层 式 导航 左 侧 小 图 标 


现在 新 建 一 个 资讯 管理 页 面 ,在 pages 目录 下 ,新 建 一 个 文件 manage_news. dart, 并 在 
manage_news. dart 中 也 添加 抽 居 式 导 航 ,代码 如 下 : 


// Chapter06/06 - 09/1ib/pages/manage news. dart 


import 'package:flutter/material. dart'; // 引入 material 包 
import '../pages/news_list. dart'; // 引入 资讯 列表 页 
class ManageNews extends StatelessWidget { // 管理 资讯 页 面 
@override 
Widget build(BuildContext context) { // 构建 页 面 的 方法 
return Scaffold( // 返回 Scaffold 页 面 
drawer: Drawer( // 添加 抽 层 式 导航 
child: Column( // 抽 层 式 导航 中 的 列 
children: < Widget >[ // 列 中 的 子 部 件 


AppBar( // 抽 屋 式 导 航 的 导航 栏 


automaticallyImplyLeading: false, 
title: Text( ' 选 择 ')， 
), 
ListTile( 
title: Text(' 资 讯 列 表 ')， 
onTap: () { 
Navigator. pushReplacement( 
context, 
MaterialPageRoute( 
builder: (context) { 


return NewsListPage( ); 


), 
appBar: AppBar( 
title: Text( ' 管 理 资讯 ')， 
) 


); 
} 
} 
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// 隐藏 小 图 标 
// 抽 层 式 导航 中 的 标题 


// 抽 层 式 导航 中 的 记录 
// 记录 的 标题 

// 记录 的 单 击 事件 

// 导航 到 列表 页 面 

// 导航 的 路 径 


// 列表 页 面 


// 资讯 管理 页 面 的 导航 栏 
// 导航 栏 中 的 标题 


body: Center(child:Text( ' 资 讯 管理 页 面 ') ,),// 资讯 管理 页 面 内 容 


在 资讯 列表 添加 抽 层 式 导 航 中 记录 的 单 击 事件 ,代码 如 下 : 


// Chapter06/06 - 09/1ib/pages/news_list. dart 


ListTile( 

title: Text(' 管 理 资 讯 ')， 

onTap: (){ 

Navigator. pushReplacement( 

context, 

MaterialPageRoute( 

builder: (context) { 
return ManageNews (); 

}, 

), 

); 

}, ) 


// 抽 屠 式 导航 中 的 一 条 记录 
// 记录 的 标题 


// 导航 到 资讯 管理 页 面 
// 导航 的 路 径 


// 资讯 管理 页 面 
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以 上 使 用 的 导航 方式 都 是 蔡 换 的 ,如 果 我 们 在 资讯 列表 NewsListPage 中 添加 很 多 资 


讯 , 然 后 通过 抽 层 式 导航 Drawer 跳 转 到 ManageNews 页 面 , 再 通过 ManageNews 中 的 
Drawer 跳 转 到 NewsListPage 页 面 时 ,会 发 现 刚刚 添加 的 数据 不 存在 了 ,这 是 因为 带 抽 屠 式 
导航 Drawer 的 页 面 被 替换 后 , 原 有 的 页 面 栈 和 数据 会 被 从 内 存 中 删除 ,所 以 就 看 不 到 之 前 
添加 的 数据 了 。 
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6.10 使 用 Tab 标签 页 导航 页 


在 manage_news. dart 文件 中 ,创建 两 个 页 面 , 一 个 页 面 用 来 创建 资讯 的 页 面 create_ 
news. dart , 另 一 个 是 我 的 资讯 页 面 my_news. dart。 这 两 个 页 面 可 以 使 用 抽 屠 式 导 航 
Drawer 来 加 载 , 也 可 以 在 页 面 中 添加 Tab 标签 页 来 实现 。 

我 们 选择 使 用 Tab 标签 页 来 实现 ,在 manage_news. dart 文件 中 ,需要 在 Scaffold 的 外 面 添 

个 小 部 件 DefaultTabController ,child 参数 值 是 Scaffold 页 面 。DefaultTabController 需 
要 设置 另外 一 个 参数 length, 表 示 有 多 少 个 Tab 标签 页 。 代 码 如 下 : 


// Chapter06/06 - 10/1ib/pages/manage_news. dart 


return DefaultTabController( // 页 面 中 添加 标签 页 
length: 2, // 添加 2 个 标签 页 
child: Scaffold( 


这 只 是 将 页 面 设置 成 了 包含 标签 页 的 页 面 ,保存 后 ,此 时 模拟 器 上 没有 显示 标签 页 ,如 
图 6.9 所 示 。 


图 6.9 没有 显示 标签 页 
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需要 手动 添加 标签 页 ,可 以 在 页 面 的 底部 添加 标签 页 ,在 Scaffold 页 面 中 添加 参数 
bottomNavigationBar, 就 可 以 在 底部 设置 页 面 导航 。 本 例 中 使 用 选项 卡 Tab 实现 。 注 意 是 
在 Scaffold 页 面 的 AppBar 中 添加 ,而 不 是 Drawer 中 的 AppBar。AppBar 中 有 一 个 参数 
bottom ,可 以 在 这 里 传人 TabBar。TabBar 是 一 个 小 部 件 ,设置 参数 tabs,tabs 需要 传人 一 
组 小 部 件 , 这 组 小 部 件 是 通过 Tab() 创 建 的 。Tab 小 部 件 需 要 配置 ,首先 设置 显示 文字 
text。 创 建 两 个 标签 页 ,一 个 是 创建 资讯 , 另 一 个 是 我 的 资讯 。 代 码 如 下 : 


// chapter06/06 - 10/1ib/pages/manage_news. dart 


appBar: RppBar( // 资讯 管理 页 面 的 导航 栏 


title: Text(' 管 理 资讯 ')， // 导航 栏 上 的 标题 
bottom: TabBar( // 导航 栏 下 方 的 标签 栏 
tabs: < Widget >[ // 标签 小 部 件数 组 
Tab(text: "创建 资讯 ', )， // 第 一 个 标签 页 
Tab(text: ' 我 的 资讯 ', ) // 第 二 个 标签 页 


J, 
), 
), 


这 时 模拟 器 的 屏幕 上 显示 了 两 个 标签 页 ,此 时 单 击 它们 没有 反应 ,如 图 6. 10 所 示 。 


图 6.10 资讯 管理 页 面 中 的 标签 页 
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我 们 也 可 以 给 标签 页 添加 小 图 标 , 设 置 参数 icon, 它 的 值 是 Icon 小 部 件 ,代码 如 下 : 


// Chapter06/06 - 10/1ib/pages/manage_news. dart 


tabs: <Widget >[ 
Tab( text:' 创 建 资讯 ', icon: Icon(Icons.create),)， // 带 图 标的 标签 页 
Tab(text: ' 我 的 资讯 ', icon: Icon(Icons. edit),) // 带 图 标的 标签 页 
], 


要 实现 页 面 的 切换 ,需要 清空 body 中 的 内 容 , 输 入 TabBarView, TabBarView 是 
Flutter 提供 的 小 部 件 , 可 以 跟 TabController 包装 的 页 面 进行 交互 ,TabController 根据 单 
击 的 标签 页 自动 加 载 正 确 的 页 面 到 TabBarView 中 ,所 以 这 里 需要 设置 TabBarView 中 包 
含 哪些 页 面 。 输 入 参数 children, 它 的 值 是 一 组 小 部 件 。 注 意 ,children 添加 的 页 面 数 量 必 
须 和 标签 Tab 的 数量 相同 。DefaultTabController 设置 的 长 度 是 2, 所 以 添加 两 个 页 面 。 

在 pages 目录 下 创建 create _news. dart, 同样 需要 引入 material 包 , 然 后 创建 
CreateNewsPagePage 类 继承 StatelessWidget, 添 加 build() 方 法 。 代 码 如 下 ， 


// Chapter06/06 - 10/1ib/pages/create_news. dart 


import 'package:flutter/material. dart'; // 引入 material 包 
class CreateNewsPage extends StatelessWidget { // 创建 页 面 
@override 
Widget build(BuildContext context) { // 覆盖 build() 方 法 
return Center(child: Text( ' 创 建 资讯 '),); // 返回 居中 文字 


} 
} 
同 理 创 建 my_news. dart 文件 。 在 manage_news. dart 中 ,引入 创建 的 这 两 个 文件 ,在 
TabBarView 的 children 中 添加 这 两 个 页 面 ,第 一 个 是 CreateNewsPage, 第 二 个 是 
MyNewsPage, 这 样 就 可 以 通过 标签 页 切换 页 面 了 。 


6.11 命名 路 径 


根据 本 章 以 上 内 容 , 可 以 总 结 出 一 个 结论 ,我 们 总 是 需要 在 导航 的 地 方 创建 页 面 , 这 种 
方式 很 烦琐 ,每 次 都 需要 使 用 MaterialPageRoute 去 导航 。 使 用 这 种 方式 可 以 实现 导航 功 
能 ,但 是 每 次 都 需要 告诉 Flutter 跳 转 到 哪个 页 面 上 ,然后 加 载 此 页 面 。 

在 Flutter 中 我 们 还 可 以 使 用 命名 路 径 的 方式 导航 ,这 种 方式 节省 很 多 编码 。 使 用 命名 
路 径 的 第 一 步 需 要 在 main. dart 中 的 MaterialApp 中 创建 路 径 注册 表 。 添 加 参数 routes, 它 
的 值 的 类 型 是 Map, 可 以 是 多 组 键 值 对 。 其 中 key 是 String 类 型 的 ,表示 路 径 , 例如 
'/admin', 这 样 就 定义 了 一 个 命名 路 由 , 值 是 builder。builder 是 MaterialPageRoute 中 的 
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builder。 代 码 如 下 : 


// Chapter06/06 - 11/1ib/main. dart 


routes: { // 命名 路 径 


'/admin': (context){ // 路 径 的 key 
return ManageNews( ); // 路 径 的 value, 通过 builder 返回 对 应 的 页 面 
} 


}, 


在 NewsListPage 资讯 列表 页 面 中 , 抽 敢 式 导 航 Drawer 不 需要 使 用 Navigator. 
pushReplacement 导航 页 面 了 ,而 是 使 用 Navigator. pushReplacementNamed (context， 
'/admin') 这 种 命名 路 径 的 方式 导航 页 面 , 保 存 并 重启 应 用 就 可 以 生效 了 。 

同样 可 以 给 AuthPage 登录 页 面 设置 命名 路 径 , 在 routes 中 再 注册 一 个 命名 路 径 , 代 码 
如 下 : 


// Chapter06/06 - 11/lib/main. dart 


routes: { // 命名 路 径 注册 表 

"/admin' :(context){ // 资讯 管理 页 面 导 航路 径 
return ManageNews( ); // 资讯 管理 页 面 

} 

'/':(context){ // 登录 页 面 的 导航 路 径 
return AuthPage( ); // 登录 页 面 

} 

}, 


// home: AuthPage(), // 注释 掉 home 参数 


'/' 是 一 个 很 特别 的 路 径 , 代 表 首 页 , 它 和 home 参数 的 功能 是 等 效 的 ,所 以 二 者 只 能 选 
择 其 中 的 一 种 ,这 里 注释 掉 home。 


6.12 解析 导航 路 径 数 据 


上 一 节 实 现 了 命名 路 径 ,在 资讯 列表 News 小 部 件 中 ,我 们 是 通过 构造 器 传递 值 导航 到 
对 应 的 资讯 详情 页 面 NewsDetailPage 中 的 。 下 面 看 看 如 何 使 用 注册 命名 的 方式 导航 到 资 
讯 详情 页 面 。 

在 main. dart 中 ,在 导航 路 径 注册 表 中 添加 '/news', 它 的 值 是 builder 对 应 的 方法 ,代码 
如 下 : 


// Chapter06/06 - 12/1ib/main. dart 


'/news': (context) { // 资讯 详情 页 面 的 导航 路 径 


94 二 Flutter 实 战 指南 


return NewsDetailPage( // 返 回 资讯 详情 页 
title: news[index]['title']， ”// 详 情 页 参数 title 
imageUr1: news[ index][ 'image'], // 详 情 页 图 片 imageUrl 


); 
} 


这 里 的 资讯 news 是 动态 加 载 的 ,不 能 使 用 硬 编码 ,所 以 详情 页 的 导航 路 径 不 能 在 导航 
路 径 注册 表 中 编写 。 

可 以 使 用 另 一 个 参数 onGenerateRoute, 它 是 导航 的 路 径 生 成 器 ,需要 传人 一 个 方法 ， 
这 个 方法 需要 的 一 个 参数 是 RouteSettings ,代码 如 下 所 示 : 


onGenerateRoute: (RouteSettings settings){}// 导 航路 径 生 成 器 
方法 需要 返回 导航 路 径 route, 可 以 返回 MaterialPageRoute。 代 码 如 下 : 


// Chapter06/06 - 12/1ib/main. dart 


onGenerateRoute: (RouteSettings settings){ // 路 径 生成 器 
return MaterialPageRoute < bool >(builder: (context) { 
return 
NewsDetailPage(_news[ index][ 'title'], _news[ index]['image']); 
} 
} 


虽然 返回 了 导航 路 径 route, 但 是 还 不 知道 需要 加 载 哪个 资讯 news。 在 (RouteSettings 
settings){} 方 法 体 中 可 以 添加 更 多 的 控制 ,settings 参数 中 保存 着 很 多 导航 信息 。 在 方法 中 
添加 final List < String > paths = settings. name. split('/') ,就 可 以 把 路 径 通 过 斜 杠 分 隔 ， 
找到 路 径 news 及 它 对 应 的 索引 。 例 如 /news/1 就 可 以 被 解析 成 news 和 1 。 

这 样 就 可 以 得 到 路 径 中 的 元 素 , 首 先 需要 找到 news 这 个 路 径 , 添 加 让 判断 paths[0]。 
/news/1 按照 settings. name. split('/') 这 种 方式 获取 的 第 一 个 元 素 必须 为 空 ,如 果 不 为 空 
则 返回 null, 表 示 不 想 加 载 任 何 页 面 ,因为 这 不 是 一 个 合法 的 值 。 

然后 核对 一 下 paths 中 的 第 二 个 元 素 是 否 等 于 news, 我 们 只 想 处 理 /news 开头 的 路 
径 ,如 果 以 news 开头 则 把 详情 页 面 的 导航 路 径 route 放 到 这 里 。 代 码 如 下 : 


// chapter06/06 - 12/1ib/main. dart 


if (paths[0] != "') { // 导航 路 径 中 的 第 一 个 元 素 
return null; // 不 加 载 任 何 页 面 
} 
证 (paths[1] == 'news') { // 如 果 第 二 个 元 素 为 news 则 导航 到 详情 页 


return MaterialPageRoute < bool >(builder: (context) { 
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returnNewsDetailPage ( 
_news[ index][ 'title’], 
_news[ index][ 'image']); 
DD); 
} 


NewsDetailPage 资讯 详情 页 需要 传递 标题 和 图 片 数 据 。 找 到 对 应 的 资讯 news, 需 要 
知道 news 列表 中 对 应 的 索引 index, 所 以 在 让 (paths[1] 三 = 'news') {} 中 需要 创建 一 个 
int 类 型 的 变量 index, 索 引 index 是 paths 中 的 第 3 个 元 素 , 同 时 需要 把 String 类 型 的 index 
转换 成 int 类 型 。 

在 Dart 语言 中 ,我们 可 以 通过 int. parse() 方 法 把 String 类 型 的 数字 转化 成 int 类 型 的 
数字 ,代码 如 下 : 


final int index = int.parse(paths[2]); // 获 取 路 径 中 第 3 个 元 素 


然后 在 方法 的 最 后 返回 null ,表示 如 果 没 有 合法 的 路 径 将 不 会 加 载 页 面 。 在 main. dart 
文件 中 ,没有 _news 这 个 属性 。 下 一 节 我 们 将 把 _news 这 个 属性 放 到 main. dart 文件 中 。 


6.13 导航 页 面 的 整理 与 优化 


在 App 中 有 两 个 不 同 的 部 分 需要 同一 组 数据 news, 可 以 把 小 部 件 NewsManager 中 的 
news 数据 放 到 main. dart 文件 中 ,这 就 意味 着 main. dart 文件 包含 了 一 组 数据 ,需要 把 
Myapp 从 StatelessWidget 改 成 StatefulWidget。 代 码 如 下 : 


// Chapter06/06 - 13/1ib/main. dart 


class Myapp extends StatefulWidget { // 改 成 有 状态 的 小 部 件 


@override 
State < StatefulWidget > createState() { // 创建 状态 的 方法 
return _MyappState(); // 返回 对 应 的 状态 
} 
} 
class _MyappState extends State < Myapp >{ // 创建 状态 类 
@override 


Widget build(BuildContext context) { // 状态 类 中 的 build() 方 法 


把 List< Map < String,dynamic>> _news 二 [] 放 到 _MyappState 中 管理 ,同时 需要 把 
_addNews 和 _deleteNews 也 放 到 main. dart 中 ,代码 如 下 : 


// Chapter06/06 - 13/1ib/main. dart 
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List <Map< String，String>> news = []; // news 属性 
void _addNews(Map < String, String > news) {  // 添加 news 的 方法 
setState(() { // 重新 构建 
_news. add( news); // 添加 资讯 news 
D); 
} 
void _deleteNews(int index) { // 通过 索引 删除 news 
setState(() { // 重新 构建 
_news. removeAt ( index); // 删除 数据 
D; 


} 


因为 我 们 把 数据 放 到 了 main. dart 中 ,所 以 NewsManager 可 以 改 成 StatelessWidget， 
只 保留 build() 方 法 ,代码 如 下 : 


// Chapter06/06 - 13/1ib/news_manager. dart 
class NewsManager extends StatelessWidget { // 改 成 无 状态 小 部 件 


final List < Map < String, String >> news; // 定义 属性 news 
final Function addNews; // 方法 属性 添加 资讯 
final Function deleteNews; // 方法 属性 删除 资讯 
NewsManager (this. news, this. addNews, this. deleteNews); // 构造 器 
@override 
Widget build(BuildContext context) { // build() 方 法 
return Column( // 列 小 部 件 
children: < Widget >[ 
NewsControl (addNews), // 添加 资讯 的 按钮 
News( // 资讯 列表 


news: news, 
deleteNews: deleteNews, 
), 
]， 


在 NewsListPage 页 面 中 ,需要 构建 新 的 NewsManager。 同 样 需要 使 用 构造 器 传递 数 
据 , 在 NewsListPage 页 面 中 ,添加 属性 和 构造 器 ,代码 如 下 : 


// Chapter06/06 - 13/1ib/pages/news_1list.dart 


final List < Map < String, dynamic >> news; // 定义 属性 news 


final Function addNews; // 方法 属性 添加 资讯 
final Function deleteNews; // 方法 属性 删除 资讯 


NewsListPage(this. news, this.addNews, this. deleteNews);  // 构 造 器 
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然后 在 NewsListPage 页 面 创 建 NewsManager 小 部 件 ,并 将 这 3 个 属性 添加 到 构造 器 
中 ,代码 如 下 : 


NewsManager (news, addNews, deleteNews) // 创 建 NewsManager 小 部 件 
在 main. dart 文件 中 ,将 首页 设置 为 资讯 列表 页 面 ,代码 如 下 : 


// Chapter06/06 - 13/1ib/main. dart 


routes: { 

'/admin': (context) { // 路 径 导 航 名 称 
return ManageNews( ); // 资讯 管理 页 面 

}, 

'/': (context) { // 路 径 导航 名 称 


return NewsListPage(_news，addNews，deleteNews);  // 资讯 列表 页 
}, 
} 


下 一 节 将 介绍 如 何 使 用 导航 路 径 生成 器 。 


6.14 使 用 导航 路 径 生成 器 


上 一 节 我 们 整理 了 页 面 .包括 状态 迁移 ,数据 迁移 。6. 12 节 我 们 创建 了 导航 路 径 的 注 
册 表 ,还 学 习 了 onGenerateRoute 导航 路 径 生 成 器 。onGenerateRoute 可 以 自 定义 传递 路 径 
名 称 , 并 从 路 径 中 提取 值 或 索引 。 

在 news. dart 文件 中 ,可 以 使 用 命名 路 径 导 航 到 详情 页 面 。 在 单 击 资讯 列表 中 的 “ 详 
情 ? 按 钮 时 可 以 传人 一 个 命名 路 径 , 它 可 以 在 onGeneratRoute 中 处 理 , 因为 在 
onGeneratRoute 的 方法 中 我 们 编写 逻辑 代码 ,从 路 径 中 提取 列表 中 索引 的 值 。 这 里 把 push 
改 成 pushNamed, 代 码 如 下 : 


// Chapter06/06 - 14/1ib/news. dart 


FlatButton( // 资讯 列表 中 的 详情 按钮 


child: Text( "详情 ')， // 按钮 上 的 文字 

onPressed: () => // 按钮 的 单 击 事件 

Navigator. pushNamed < bool >(context, '/news/' + index. toString() 

) .then( (value){ // 命名 导航 路 径 
if(value){ 


deleteNews( index); // 返回 到 当前 页 面 时 调用 删除 方法 
} 

])， 

), 
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pushNamed() 方 法 的 泛 型 还 是 bool 类 型 ,传递 参数 context 和 路 径 名 称 , 记 住 名 称 以 斜 
杠 开 始 , 因 为 在 onGenerateRoute 的 第 一 个 让 中 验证 这 个 斜 杠 ,如 果 不 以 斜 杠 开始 ,就 不 会 
执行 后 面 的 逻辑 。 斜 杠 后 面 是 news, 因 为 我 们 在 第 二 个 if 中 检查 这 个 名 称 , 如 果 存 在 
news, 会 获取 路 径 中 的 最 后 一 个 值 ,然后 转换 成 int。 最 后 一 个 值 是 news 列表 中 的 索引 ,所 
以 这 里 使 用 的 是 '/news/' 十 index. toString()。 在 Dart 语言 中 ,加 号 可 以 使 两 个 String 拼接 
在 一 起 。 这 样 我 们 就 可 以 使 用 命名 路 径 导航 ,还 可 以 通过 命名 导航 路 径 动 态 加 载 数据 。 

同时 ,我们 把 状态 数据 移 到 main. dart 文件 中 ,这 一 步 很 重要 ,因为 当 我 们 通过 抽 导 式 
导航 切换 到 资讯 管理 manage_news. dart 页 面 后 ,再 导航 到 资讯 列表 页 面 news_list. dart 
时 ,我 们 还 能 看 到 之 前 在 news_list. dart 中 添加 的 资讯 内 容 。 因 为 使 用 命名 路 径 的 页 面 被 
MaterialApp 小 部 件 管 理 ,而 不 是 在 将 被 销毁 的 页 面 上 管理 页 面 ,MaterialApp 管理 的 页 面 
不 会 被 销毁 ,除非 退出 App, 所 以 这 是 应 用 的 另 一 个 提升 。 

在 使 用 onGenerateRoute 来 处 理 命名 路 径 导 航 时 ,对 应 的 路 径 不 应 该 出 现在 导航 路 径 
注册 表 中 。 如 果 路 径 在 导航 路 径 的 注册 表 routes: {} 中 注册 了 ,那么 这 个 路 径 将 不 会 执行 
onGenerateRoute 中 的 逻辑 ,如 果 没 有 注册 ,可 以 将 路 径 名 称 传递 到 onGenerateRoute 中 ,并 
导航 到 目标 页 面 。 

在 MaterialApp 中 ,还 有 一 个 与 路 径 相关 的 参数 onUnknownRoute, 表 示 当 onGenerateRoute 
返回 null 时 onUnknownRoute 会 被 执行 。 这 里 可 以 展示 一 些 备 用 页 面 ,通过 
MaterialPageRoute 返回 对 应 的 页 面 。 代 码 如 下 : 


// Chapter06/06 - 14/1ib/main. dart 


onUnknownRoute: (RouteSettings settings){ // 备用 页 面 
return MaterialPageRoute( // 返回 路 径 
builder: (context) { 
return NewsListPage(_news,_addNews,_deleteNews);// 列表 页 
D); 
}, 


这 样 当 导航 找 不 到 对 应 的 页 面 时 ,可 以 返回 到 主页 。 
6.15 ”对 话 框 


本 章 的 以 上 内 容 创建 的 都 是 占 满 全 屏 的 页 面 。Flutter 还 可 以 使 用 导航 在 屏幕 上 显示 
一 些 友 加 层 ,而 不 是 替换 整个 页 面 ,我 们 通常 称 它们 为 模 态 窗口 或 者 对 话 框 。 

下 面 实现 在 资讯 详情 页 NewsDetailPage 中 单 击 返回 按钮 时 ,弹出 一 个 对 话 框 页 面 。 在 
news_detail. dart 中 单 击 按钮 事件 ,首先 展示 对 话 框 页 面 ,通过 调用 showDialog() 方 法 来 创 
建 ,showDialog() 是 Flutter 中 material 包 提供 的 .所 以 可 以 直接 使 用 。 调 用 showDialog() 
将 显示 一 个 对 话 框 ,showDialog() 需 要 传人 context 和 builder 参数 ,表示 需要 构建 什么 内 
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容 , 它 的 值 是 一 个 方法 。 方 法 中 需要 返回 一 个 小 部 件 , 表 示 对 话 内 部 需要 返回 的 内 容 , 可 以 
自己 组 装 内 容 ,也 可 以 使 用 Flutter 提供 的 小 部 件 AlertDialog。AlertDialog 定义 了 一 个 默 
认 的 对 话 框 ,参数 中 我 们 可 以 配置 一 些 内 容 , 例 如 title, 表 示 顶 部 标题 栏 , 男 外 一 个 参数 是 
content, 表 示 显 示 的 主要 内 容 。 最 后 添加 actions 参数 ,也 是 一 组 小 部 件 ,这 里 可 以 是 一 组 
按钮 ,我 们 添加 两 个 FlatButton, 代 码 如 下 : 


// Chapter06/06 - 15/1ib/pages/news_detail. dart 


RaisedButton( 


// 详情 页 的 返回 按钮 
color: Theme. of(context).accentColor, // 按钮 上 的 强调 色 
child: Text(' 返 回 ')， // 按钮 上 的 文字 
onPressed: () { // 单 击 事件 


showDialog(context:context, builder: (BuildContext context) { // 弹出 对 话 框 


return AlertDialog( // 对 话 框 小 部 件 
title: Text( ' 确 定 吗 ')， // 对 话 框 上 的 标题 
content: Text( "删除 后 不 可 以 撤销 !')， // 对 话 框 中 的 内 容 
actions: <Widget >[ // 对 话 框 下 面 小 部 件 

FlatButton( // 无 背景 色 的 按钮 
child: Text(' 删 除 ')， // 按钮 上 的 文字 
onPressed: () {}, // 按钮 上 的 单 击 事件 
), 
FlatButton( // 无 背景 色 的 按钮 
child: Text(' 取 消 ')， // 按钮 上 的 文字 
onPressed: () {}, // 按钮 上 的 单 击 事件 


下 一 步 给 对 话 框 中 的 按钮 添加 单 击 事件 。 对 话 框 也 是 由 Navigator 控制 的 ,所 以 可 以 
调用 navigator. pop(context) 来 关闭 对 话 框 ,而 不 是 页 面 。 

如 果 单 击 “ 删 除 ” 按 钮 ,可 以 先 调用 navigator. pop(context)。 这 里 也 可 以 添加 第 二 个 参 
数 , 表 示 给 上 一 个 页 面 返 回 值 ,然后 在 showDialog() 方 法 后 面 添加 then 监听 。 本 示例 不 返 
回 值 ,在 navigator. pop(context) 下 面 添 加 navigator. pop(context，true) ,表示 对 话 框 关闭 
后 再 弹出 当前 页 面 ,并 给 前 一 个 页 面 返回 true。 代 码 如 下 : 


// chapter06/06 - 15/1ib/pages/news_detail. dart 


actions: <Widget >[ 


// 对 话 框 下 面 的 小 部 件 
FlatButton( // 无 背景 色 的 按钮 
child: Text(' 删 除 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 上 的 单 击 事件 
Navigator. pop(context) 7 // 关闭 对 话 框 


Navigator. pop(context, true); 
}, 


// 弹出 当前 页 面 
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), 


FlatButton( // 无 背景 色 的 按钮 
child: Text(' 取 消 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 上 的 单 击 事件 

Navigator. pop(context); // 关闭 对 话 框 


}, 
) 
]， 
我 们 可 以 把 showDialog 分 离 出 来 ,添加 一 个 方法 _showDialogWarning() ,参数 需要 传 
入 BuildContext 类 型 的 context, 把 showDialog 代码 放 到 _showDialogWarning() 方 法 中 。 
代码 如 下 : 


_showDialogWarning(BuildContext context){ // 分 离 showDialog 方法 
showDialog( 


在 返回 按钮 这 里 需要 在 方法 中 调用 _showDialogWarning(context) ,代码 如 下 : 
onPressed: () =>_showDialogWarning(context), // 调用 弹出 框 


这 样 在 单 击 返 回 按钮 的 时 候 就 会 弹出 对 话 框 ,如 图 6. 11 所 示 。 


图 6.11 对 话 框 显示 效果 
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6.16 模 态 弹出 层 


本 节 学 习 模 态 弹 出 层 , 在 创建 资讯 create_news. dart 页 面 中 ,使 用 RaisedButton 替换 
居中 的 文字 ,并 给 按钮 添加 文字 。 代 码 如 下 : 


// Chapter06/06 - 16/1ib/pages/create news. dart 


body:RaisedButton( // 有 背景 色 的 按钮 


child: Text(' 保 存 ')， // 按钮 上 的 文字 
onPressed: (){}, // 按钮 上 的 单 击 事件 


), 


要 实现 单 击 按钮 弹出 一 个 模 态 层 , 可 以 给 参数 onPressed 赋值 一 个 匿名 方法 ,方法 中 调 
用 Flutter 提供 的 showModalBottomSheet() 方 法 ,这 个 方法 会 从 底部 显示 一 个 模 态 弹出 
层 ,showModalBottonSheet 需要 context 和 builder 两 个 参数 。builder 参数 需要 传人 一 个 
方法 ,方法 中 返回 一 个 小 部 件 。 模 态 弹出 层 不 像 对 话 框 有 特定 的 小 部 件 , 但 是 可 以 简单 地 定 
义 一 个 ,代码 如 下 : 


// Chapter06/06 - 16/1ib/pages/create_news. dart 


onPressed: () { // 创建 资讯 按钮 的 单 击 事件 


ShowModalBottomSheet( // 模 态 弹出 层 
context: context, 六 
builder: (BuildContext context) { // 构建 内 容 

return Center( // 居中 显示 
child: Text(' 这 是 一 个 弹出 层 ')， // 文字 小 部 件 


); 
D); 
}, 
保存 并 重启 应 用 ,在 创建 资讯 页 面 , 单 击 保存 ,模拟 器 显示 如 图 6. 12 所 示 。 
模 态 弹出 层 也 是 由 Navigator 控制 的 ,所 以 可 以 使 用 Navigator 中 的 pop() 等 方法 。 
以 上 就 是 页 面 导 航 的 全 部 内 容 , 后 面 的 章节 会 经 常用 到 ,所 以 需要 理解 透彻 。 


6.17 总 结 


本 章 我 们 学 习 了 压 入 和 弹出 页 面 ,理解 了 页 面 栈 ,Navigator 不 会 直接 导航 页 面 ,而 是 导 
航路 径 route, 例 如 MaterialPageRoute。 路 径 route 中 包含 builder,builder 可 以 构建 一 个 页 
面 小 部 件 。 我 们 还 学 习 了 向 前 向 后 传递 参数 ,如 何 使 用 then() 方 法 、 命 名 导航 等 。 


102 十 | Flutter 实 战 指南 


图 6.12 模 态 弹出 层 显示 效果 


在 MaterialApp 中 可 以 创建 一 个 全 局 的 导航 路 径 注册 表 , 然 后 从 应 用 程序 的 任何 位 置 
定位 这 些 名 称 并 导航 到 路 径 对 应 的 页 面 ,而 无 须 使 用 MaterialPageRoute 编写 样板 内 容 。 
命名 路 径 生 成 器 onGenerateRoute 可 以 实现 自 定义 路 径 , 并 通过 路 径 传 递 数据 和 处 理 逻 辑 。 
onUnknowRoute 可 以 实现 一 个 备用 的 404 页 面 。 我 们 还 学 习 了 对 话 框 和 模 态 弹出 层 , 它 们 
也 是 由 Navigator 控制 的 。 


处 理 用 户 输 入 


本 章 学 习 Flutter 的 用 户 输入 。 第 13 章 还 会 介绍 用 户 输入 的 高 级 功能 。 本 章 将 学 习 如 
何 添加 文本 框 和 其 他 用 户 输入 类 型 ,并 监听 用 户 所 做 的 更 改 ,例如 用 户 输入 信息 或 单 击 按钮 
保存 时 。 这 些 功 能 都 是 常见 的 功能 ,用 户 在 应 用 中 可 以 通过 用 户 输入 的 方式 添加 一 些 数据 。 


7.1 使 用 文本 框 TextField 并 保存 用 户 输入 内 容 


在 创建 页 面 create_news. dart 中 ,有 一 个 模拟 的 添加 按钮 。 我 们 可 以 在 这 个 页 面 中 添 
加 文本 框 ,让 用 户 添 加 一 些 内 容 , 例 如 标题 描述、 图片 等 。 

首先 添加 3 个 文本 框 ,在 CreateNewsPage 中 显示 3 个 文本 框 ,并 让 它们 彼此 上 下 排列 ， 
所 以 使 用 Column 小 部 件 ,然后 给 参数 children 赋值 , 值 是 Flutter 提供 的 小 部 件 
TextField。TextField 允许 用 户 输入 文字 ,这 样 就 实现 了 用 户 输入 。 代 码 如 下 : 

// Chapter07/07 - 01/1ib/pages/create news. dart 


class CreateNewsPage extends StatelessWidget { // 创建 资讯 页 面 


@override 
Widget build(BuildContext context) { // 覆盖 build() 方 法 
return Scaffold( // Scaffold 页 面 
body: Column(children: < Widget >[ // 列 小 部 件 
TextField() // 文本 框 
],), 
); 
} 
} 
TextField( 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 


} 


如 何 把 文本 框 中 的 内 容 显示 在 Text 中 呢 ? 实现 这 个 功能 需要 管理 内 部 的 状态 ,因为 
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从 TextField 中 获取 数据 ,需要 在 Text 中 显示 ,并 且 显 示 的 内 容 是 变化 的 ,所 以 需要 一 个 内 
部 的 数据 ,因此 CreateNewsPage 需要 继承 StatefulWidget。 然 后 在 _CreateNewsPageState 
中 添加 一 个 String 类 型 属性 的 title, 给 它 一 个 空 的 初始 值 。 代 码 如 下 : 


// Chapter07/07 - 01/1ib/pages/create news. dart 


class CreateNewsPage extends StatefulWidget { // 有 状态 小 部 件 


@override 
State < StatefulWidget > createState() { // 覆盖 createState 
return _CreateNewsPageState( ); // 返回 状态 类 


} 
} 


class _CreateNewsPageState extends State < CreateNewsPage >{ 


String title = "7 // 内 部 数据 title 


在 onChanged() 方 法 中 调用 setState() 方 法 ,setState() 方 法 中 需要 传人 一 个 方法 ,该 方 
法 把 value 赋值 给 title, 这 样 就 把 用 户 输入 的 数据 和 title 绑 定 在 一 起 了 。 当 调用 setState() 
方法 时 会 重新 泻 染 界面 。 代 码 如 下 : 


// Chapter07/07 - 01/1ib/pages/create_news. dart 


onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 


setState(() { // 重新 泻 染 页 面 
value = title; // 文本 框 中 的 内 容 赋值 给 属性 title 


D); 
} 


然后 把 title 传 给 Text 小 部 件 ,代码 如 下 : 


// Chapter07/07 - 01/1ib/pages/create_news. dart 


TextField( 


onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 

setState(() { // 重新 泻 染 页 面 

title = value; // 文本 框 中 的 内 容 赋值 给 属性 title 
]) 

}, 

), 


Text(title) // Text 小 部 件 显示 属性 title 的 值 


保存 并 重启 应 用 ,在 创建 资讯 页 面 的 文本 框 中 输入 一 些 内 容 时 ,下 面 的 文字 小 部 件 显示 
的 内 容 和 输入 的 文本 是 一 样 的 ,如 图 7. 1 所 示 。 
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图 7.1 文本 框 中 的 内 容 和 Text 小 部 件 


以 同样 的 方式 再 添加 两 个 TextField, 其 中 一 个 是 描述 , 另 一 个 是 评论 分 数 ,描述 是 一 个 
多 行文 本 ,代码 如 下 : 


// Chapter07/07 - 01/1ib/pages/create news. dart 


TextField( // 标题 文本 框 


onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
setState(() { // 重新 泻 染 页 面 
title = value; // 文本 框 中 的 内 容 赋值 给 属性 title 
}) 
}， 
), 
TextField( // 描述 文本 框 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
}, 
), 
TextField( // 分 数 文本 框 


onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
in 
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分 数 需 要 显示 数字 键盘 。 下 一 节 学 习 怎 样 实现 。 
7.2 配置 文本 框 TextField 


首先 在 _CreateNewsPageState 中 添加 两 个 属性 ,一 个 是 String 类 型 的 description 属 
性 , 另 一 个 是 double 类 型 的 score 属性 ,并 把 score 初始 化 为 0.0, 这 里 也 可 以 不 初始 化 , 代 
码 如 下 : 


// Chapter07/07 - 02/1ib/pages/news_detail. dart 


String title = "7 // 资讯 标题 


String description = ''; // 资讯 描述 


double score = 0.0; // 资讯 分 数 


属性 创建 完成 后 ,在 第 二 个 TextField 中 ,把 value 赋值 给 description。 在 第 三 个 
TextField 中 把 value 赋值 给 score。 这 时 IDE 报错 ,因为 value 是 String 类 型 ,而 我 们 想 保 
存 的 属性 为 double 类 型 ,可 以 通过 double. parse() 方 法 进行 转换 。 代 码 如 下 : 


// Chapter07/07 - 02/1ib/pages/news_detail. dart 


TextField( // 资讯 描述 


onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
description = value; // 文本 框 中 的 内 容 赋值 给 属性 description 
}, 
), 
TextField( // 资讯 分 数 文本 框 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
score = double. parse(value); // 将 String 类 型 的 数字 转化 成 double 


}, 
), 


TextField 可 以 设置 用 户 的 输入 键盘 ,TextField 小 部 件 中 参数 keyboardType 表示 用 户 
的 输入 类 型 , 它 的 值 的 类 型 是 TextInputType。 在 TextInputType 后 面 加 点 后 ,在 IDE 中 可 
以 看 到 很 多 类 型 ,例如 时 间 类 型 email 类 型 等 。 在 第 三 个 TextField 中 使 用 
TextInputType. number 类 型 ,表示 用 户 在 输入 第 三 个 文本 框 时 ,弹出 的 是 一 个 数字 键盘 。 
在 第 二 个 TextField 中 ,需要 实现 可 以 输入 多 行文 本 ,可 以 设置 参数 maxLines 的 值 。 代 码 
如 下 : 


// Chapter07/07 - 02/1ib/pages/news_detail. dart 
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TextField( // 资讯 描述 


maxLines: 5, // 文本 框 显示 可 以 输入 5 行 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
description = value; // 文本 框 中 的 内 容 赋 值 给 属性 description 
}, 
), 
TextField( // 资讯 分 数 文本 框 
keyboardType: TextInputType. number, // 只 显示 数字 键盘 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
Score = double.parse(value); // 文本 框 中 的 内 容 赋值 给 属性 score 


}, 
), 


7.3 设置 文本 框 TextField 样式 


文本 框 的 样式 可 以 通过 参数 decoration 设置 ,decoration 值 的 类 型 是 InputDecoration。 
我 们 实例 化 一 个 InputDecoration 对 象 ,然后 在 InputDecoration 中 可 以 设置 很 多 参数 来 装 
饰 TextField, 例 如 添加 边框 , 边 距 、 记 录 字 数 的 计数 器 、 错 误 的 显示 方式 等 。 

在 第 一 个 TextField 中 , 可 以 使 用 InputDecoration 添加 文本 框 的 标题 。 在 
InputDecoration 中 参数 labelText 可 以 设置 标题 ,labelText 的 值 是 String 类 型 ,代码 如 下 : 


// Chapter07/07 - 03/1ib/pages/create_news. dart 


TextField( 


decoration: InputDecoration( // 设置 TextField 的 样式 
labelText: ' 资 讯 标 题 ' // 设置 标签 文本 


)， 
onChanged: (String value) { 


保存 后 显示 如 图 7. 2 所 示 。 

此 时 显示 的 TextField 缺少 间距 ,在 InputDecoration 中 可 以 设置 很 多 内 容 , 例 如 可 以 
设置 很 多 TextField 的 内 部 样式 ,但 是 无 法 设置 它 的 位 置 。 在 TextField 中 参数 style 表示 
设置 文本 的 样式 ,例如 输入 文字 的 颜色 。 在 TextField 中 没有 设置 间距 的 参数 ,但 是 可 以 在 
TextField 的 外 面 加 一 个 Container, 用 Container 小 部 件 设 置 间距 ,代码 如 下 : 


// Chapter07/07 - 03/1ib/pages/create_news. dart 


Container( // 设置 TextField 之 间 的 间距 
margin: EdgeInsets.all(10.0), // 外 间距 设置 为 10 像素 
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图 7.2 文本 框 中 的 标签 文本 


child: TextField( // 文本 框 小 部 件 
decoration: InputDecoration(labelText: ' 资 讯 标题 '), // 标 题 
onChanged: (String value) { // 改变 文本 框 中 内 容 时 调用 
setState(() { // 重新 泻 染 页 面 
title = value; // 文本 框 中 的 内 容 赋 值 给 属性 title 
1D); 
}, 


使 用 同样 的 方式 给 另外 两 个 TextField 添加 标签 文本 和 间距 ,保存 后 模拟 器 上 的 显示 
效果 如 图 7. 3 所 示 。 

在 文本 输入 的 页 面 中 ,需要 把 Colum 小 部 件 改 成 ListView 小 部 件 。 这 样 当 文本 框 过 
多 时 ,即使 页 面 高 度 超过 屏幕 的 高 度 也 不 会 报错 。 创 建 资讯 页 面 还 缺少 一 个 按钮 来 提交 
数据 。 

我 们 的 目标 是 通过 创建 资讯 页 面 创 建 一 条 新 的 资讯 ,并 显示 到 资讯 列表 NewsListPage 
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图 7.3 设置 文本 标签 和 间距 


页 面 上 。 首 先 在 TextField 下 面 加 一 个 RaisedButton 按钮 ,代码 如 下 : 


// Chapter07/07 - 03/1ib/pages/create news. dart 


RaisedButton( // 创建 资讯 页 面 的 创建 按钮 


child: Text(' 创 建 ')， // 按钮 上 的 文字 
onPressed: (){},) // 按钮 的 单 击 事件 


在 单 击 事件 的 方法 中 可 以 验证 _CreateNewsPageState 中 3 个 属性 是 否 合法 ,然后 把 创 
建 的 这 个 资讯 传 到 main. dart 文件 中 ,因为 news 这 组 数据 在 main. dart 文件 中 管理 。 我 们 
还 需要 使 用 main. dart 中 的 _addNews() 方 法 来 创建 一 个 新 的 news。 现 在 news 只 包含 硬 
编码 的 标题 和 图 片 , 没 有 描述 和 分 数 , 而 我 们 的 目标 是 跟 main. dart 建立 联系 ,那么 怎样 实 
现 呢 ? 

在 main. dart 文件 中 ,我 们 通过 ManageNews 页 
可 以 把 main. dart 文件 中 的 _addNews() 方 法 传递 
传递 到 CreateNewsPage 页 面 。 


面 ,加 载 创建 资讯 的 页 面 CreateNewsPage， 
给 ManageNews 页 面 , 再 把 _addNews() 
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7.4 保存 文本 框 中 内 容 


因为 我 们 在 CreateNewsPage 中 创建 资讯 news, 所 以 在 news_list. dart 中 不 再 需要 
addNews() 方 法 和 deleteNews() 方 法 ,把 它们 都 删除 ,按钮 也 删除 。 在 News 小 部 件 中 也 删 
除 addNews() 方 法 和 deleteNews() 方 法 ,构造 器 也 需要 修改 。news_control. dart 这 个 文件 
不 需要 了 ,直接 删除 即 可 。 

现在 怎样 添加 一 个 资讯 news 呢 ? 在 main. dart 文件 中 给 ManageNews 页 面 传递 
addNews() 和 deleteNews() 两 个 方法 。 代 码 如 下 : 


// Chapter07/07 - 04/1ib/main. dart 


'/admin': (context) { // 命名 路 径 
return ManageNews(_addNews，deleteNews); // 给 资讯 管理 页 面 传人 方法 
} 


因为 需要 在 CreateNewsPage 页 面 中 触发 addNews() 方 法 ,所 以 需要 把 addNews 的 引 
用 传递 给 CreateNewsPage 页 面 。 下 面 需 要 以 构造 器 和 属性 的 方式 传递 方法 引用 。 首 先 在 
ManageNews 页 面 中 添加 两 个 属性 ,它们 是 方法 类 型 ,用 final 修饰 。 代 码 如 下 : 
// Chapter07/07 - 04/1ib/pages/manage_news. dart 
class ManageNews extends StatelessWidget { // 管理 资讯 页 面 
final Function addNews; // 添加 资讯 的 方法 属性 


final Function deleteNews; // 删除 资讯 的 方法 属性 
ManageNews(this.addNews, this. deleteNews);  // 构造 器 方式 赋值 


在 CreateNewsPage 页 面 中 也 需要 定义 一 个 方法 属性 addNews, 创 建 一 个 构造 器 方法 ， 
把 传人 的 addNews 引用 赋值 到 这 个 属性 中 。 通 过 创建 这 个 传 值 链条 ,addNews() 方 法 最 终 
可 以 在 CreateNewsPage 中 使 用 。 代 码 如 下 : 


// chapter07/07 - 04/1ib/pages/create_news. dart 


RaisedButton( // 创建 资讯 页 面 的 创建 按钮 
child: Text(' 创 建 ')， // 按钮 上 的 文字 

onPressed: (){ // 按钮 的 单 击 事件 

widget. addNews(); // 调用 添加 方法 


},) 


在 main. dart 中 需要 一 个 完整 的 news 并 将 其 添加 到 news 列表 中 ,因此 需要 创建 一 个 
Map ,key 的 类 型 是 String, 值 的 类 型 是 动态 的 。 因 为 _CreateNewsPageState 中 有 一 个 分 数 
的 属性 ,在 按钮 单 击 事件 的 方法 中 ,创建 一 个 Map 类 型 的 变量 ,代码 如 下 : 
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// Chapter07/07 - 04/1ib/pages/create news. dart 


onPressed: (){ // 按钮 的 单 击 事件 
Map < String, dynamic > news // 创建 一 个 Map 类 型 的 变量 
= {'title':title, 'image': 'assets/newsl1. jpg', 'description':description, 'score': score}; 
// 图 片 使 用 硬 编码 形式 赋值 
widget. addNews (news); // 调用 main. dart 中 的 添加 方法 
},) 


把 项 目 中 Map 泛 型 改 成 < String,dynamic >, 保 存 并 重启 应 用 后 ,添加 一 个 资讯 news， 
然后 通过 抽 导 式 导航 来 到 资讯 列表 页 面 ,我 们 发 现 资讯 创建 成 功 了 ,如 图 7.4 所 示 。 


图 7.4 添加 资讯 后 的 资讯 列表 页 面 


7.5 优化 文本 框 显示 
现在 可 以 优化 一 下 界面 ,有 一 个 常用 小 部 件 SizedBox 可 以 调整 间距 , 它 不 泻 染 任何 内 容 ， 
只 会 添加 一 些 空间 ,例如 宽度 .高度 。 按 钮 上 面 可 以 添加 高 度 为 10 像素 的 空间 ,代码 如 下 : 
SizedBox(height: 10,)， // 在 文本 框 和 按钮 之 间 添 加 10 像素 的 高 度 
同时 优化 一 下 按钮 的 颜色 ,设置 按钮 的 背景 色 为 主题 中 的 颜色 。 如 果 要 修改 按钮 上 文 
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字 的 颜色 ,可 以 设置 参数 textColor 的 值 , 例 如 使 用 白色 。 代 码 如 下 : 
// Chapter07/07 - 05/1ib/pages/create_news. dart 


RaisedButton( 


color: Theme. of (context). accentColor， // 按钮 的 背景 色 
textColor: Colors. white, // 按钮 上 文字 的 颜色 


child: Text(' 创 建 ')， // 按钮 上 的 文字 


现在 看 一 下 如 何 实 现在 单 击 “ 创 建 "按钮 之 后 , 回 到 资讯 列表 页 面 。 上 一 章 我 们 学 习 了 
Flutter 导航 的 相关 知识 ,让 我 们 在 这 里 实践 一 下 。 在 main. dart 中 ,我 们 通过 命名 路 径 的 
方式 设置 了 资讯 列表 页 面 NewsListPage 的 导航 路 径 为 '/', 所 以 在 调用 addNews() 方 法 后 
使 用 命名 路 径 的 方式 跳 转 页 面 。 代 码 如 下 : 

Navigator. pushReplacementNamed(context，'/');// 跳 转 到 资讯 列表 页 面 


_CreateNewsPageState 中 的 这 3 个 属性 都 是 私有 的 ,所 以 在 属性 前 面 加 上 下 画 线 ,使 
用 属性 的 地 方 也 需要 修改 一 下 。 


7.6 使 用 开关 Switch 小 部 件 


下 面 给 创建 资讯 页 面 添加 验证 功能 ,例如 在 文本 框 下 面 添加 开关 ,表示 是 否 同意 应 用 协 
议 。 可 以 在 按钮 的 上 面 添 加 Switch 小 部 件 ,Switch 是 一 个 开关 小 部 件 。 把 鼠标 悬 停 在 
Switch 上 ,显示 参数 value 和 onChanged 是 必须 赋值 的 。 

Switch 是 一 个 需要 管理 状态 的 小 部 件 ,通过 状态 值 来 显示 Switch 的 样式 ,所 以 需要 设 
置 一 个 值 , 值 是 一 个 布尔 类 型 ,这 里 设置 为 true, 代 码 如 下 : 

Switch(value:true), // 给 开关 小 部 件 设 置 值 


这 样 还 不 行 ,还 需要 设置 onChanged 参数 ,添加 一 个 方法 ,方法 中 需要 一 个 布尔 参数 来 
告诉 这 个 开关 是 开 的 还 是 关 的 。 代 码 如 下 : 


Switch(value:true, onChanged: (value){},)， // 设 置 参 数 onChanged 


这 里 的 value 是 布尔 类 型 的 。 保 存 后 可 以 看 到 这 个 开关 显示 出 来 了 ,但 是 太 宽 了 ,默认 
它 会 占据 全 部 宽度 ,需要 处 理 一 下 。 可 以 使 用 另外 一 个 小 部 件 SwitchListTile, 参 数 不 变 但 
需要 添加 一 个 标题 ,例如 一 个 文本 小 部 件 ' 接 受 条 款 '。 代 码 如 下 : 


// Chapter07/07 - 06/1ib/pages/create_news. dart 


SwitchListTile( // SwitchListTile 开关 小 部 件 


title: Text(' 接 受 条 款 ')， // 开关 的 标题 
value: true, // 开关 的 值 


onChanged: (value) {}, // 改变 开关 状态 时 调用 onChanged( ) 方 法 
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此 时 开关 可 以 通过 拖 动 改 变 其 状态 , 单 击 开 关 改 变 不 了 它 的 状态 。 要 想 通过 单 击 改变 
开关 的 状态 ,需要 管理 一 个 内 部 状态 ,所 以 需要 在 _CreateNewsPageState 添加 布尔 类 型 属 
性 ,例如 _accept, 设 置 它 为 false, 代 码 如 下 : 


bool accept = false; 


把 _accept 赋值 给 开关 SwitchListTile 中 的 value 参数 ,这 样 开关 这 个 小 部 件 的 值 就 是 
有 状态 的 了 。 要 使 开关 变化 需要 在 onChanged() 方 法 中 添加 setState() 方 法 ,然后 传人 一 个 
方法 ,方法 中 把 value 赋值 给 _accept 属性 。 代 码 如 下 : 


// Chapter07/07 - 06/1ib/pages/create_news. dart 


SwitchListTile( // 开关 小 部 件 


title: Text( "接受 条 款 ')， // 开关 的 文字 

value: _accept, // 开关 的 状态 

onChanged: (value) { // 改变 开关 状态 时 调用 此 方法 
setState(() { // 重新 泻 染 页 面 

_accept = value; // 把 开关 当前 的 值 赋值 给 _accept 属性 
D); 


现在 可 以 单 击 这 个 开关 来 切换 状态 了 ,如 图 7.5 所 示 。 


图 7.5 开关 SwitchListTile 小 部 件 
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7.7 总 结 


本 章 我 们 学 习 了 使 用 TextField 获取 用 户 输入 的 数据 ,并 且 优化 了 TextField 的 显示 ， 
还 学 习 了 如 何 设 置 键盘 的 类 型 。 除 了 TextField 我 们 还 学 习 了 开关 Switch 小 部 件 。 


深入 学 习 Flutter 小 部 件 


之 前 的 章节 我 们 学 习 并 使 用 了 一 些小 部 件 。 本 章 将 深入 学 习 更 多 的 小 部 件 , 同 时 学 习 
如 何 使 用 并 配置 它们 ,以 及 如 何 组 合 小 部 件 .与 小 部 件 交 互 等 ,这 对 构建 灵活 的 用 户 界面 很 
重要 ,让 我 们 开始 吧 ! 


8.1 Flutter 官网 探索 小 部 件 


如 何 找到 更 多 的 小 部 件 呢 ? Flutter 官方 网 站 提供 很 多 内 容 。 使 用 浏览 器 打开 http:// 
flutter. dev, 如 图 8.1 所 示 。 


I Flutter 


Designlelst | 


Made by Google 


图 8.1 Flutter 官 网 


单 击 页 面 右 上 角 的 “Get started” 按 钮 ,然后 在 新 的 页 面 上 单 击 页 面 左 侧 的 “Widget 


catalog” 按 钮 ,如 图 8.2 所 示 。 
页 面 上 显示 了 很 多 类 别 的 小 部 件 。 例 如 之 前 章节 中 经 常 使 用 的 Material Components 
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委 Flutter Do oe commy A YOO 


Widget catalog 


ort 


图 8.2 Flutter 官网 的 Widget catalog 


小 部 件 , 它 是 一 个 很 基本 的 小 部 件 类 别 。 在 Basics 分 类 中 ,包含 很 多 常用 的 小 部 件 ,例如 行 
小 部 件 Row 、 列 小 部 件 Column、 图 片 小 部 件 Image、 文 字 小 部 件 Text、 图 标 小 部 件 Icon \ 页 
面 小 部 件 Scaffold、 导航 栏 小 部 件 AppBar、 按 钮 小 部 件 RaisedButton 等 。 在 Material 
Components 小 部 件 中 包含 页 面 小 部 件 Scaffold、 导航 栏 小 部 件 AppBar、 按 钮 小 部 件 
RaisedButton, 还 有 一 些 我 们 没有 使 用 过 的 按钮 ,例如 浮动 按钮 FloatingActionButton 等 。 

任何 一 个 小 部 件 都 可 以 通过 查看 文档 的 方式 了 解 详细 的 信息 ,包括 这 个 小 部 件 能 呈现 
什么 效果 , 它 有 哪些 特性 。 文 档 中 还 可 以 单 击 链接 深入 学 习 , 有 的 小 部 件 还 包含 示例 代码 。 
在 文档 中 还 可 以 看 到 小 部 件 类 中 的 属性 和 方法 , 单 击 属性 和 方法 可 以 继续 了 解 更 多 的 内 
容 等 。 

我 们 通过 官网 文档 的 探索 ,可 以 了 解 Flutter 提供 了 哪些 小 部 件 及 怎样 使 用 它们 , 别 担 
心 Flutter 中 包含 这 么 多 的 小 部 件 , 因 为 有 一 些小 部 件 做 的 是 相同 的 事情 ,最 终 我 们 只 会 经 
常 使 用 10 一 20 个 小 部 件 来 构建 应 用 中 的 主要 内 容 。 


8.2 使 用 不 同 的 小 部 件 完 成 同一 个 目标 


到 目前 为 止 我 们 已 经 使 用 了 很 多 小 部 件 ,包含 一 些 核心 的 小 部 件 。 现 在 试 试用 不 同 的 
小 部 件 来 实现 同样 的 显示 效果 。 

在 news. dart 文件 中 ,我 们 创建 了 News 小 部 件 , 它 包含 Card 小 部 件 。 在 Card 小 部 件 
中 ,资讯 标题 显示 在 图 片 的 下 面 ,代码 如 下 : 
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// Chapter08/08 - 02/1ib/news. dart 


Image.asset (news[ index][ 'image']), // Card 中 的 图 片 小 部 件 
Text( // Card 中 的 文字 小 部 件 
news[ index][ 'title'], 


) 


现在 在 标题 和 图 片 之 间 加 一 些 间 距 , 通 常 有 3 种 方法 来 实现 。 首 先 可 以 在 图 片 和 文字 
间 加 上 SizedBox(height: 10.0,),SizedBox 只 是 一 个 简单 的 占 位 小 部 件 , 不 会 显示 任何 内 
容 ,SizedBox 既 可 以 设置 高 度 也 可 以 设置 宽度 ,SizedBox(Cheight: 10.0,) 表 示 垂 直 间 距 是 
10 像素 ,这 是 第 一 种 方式 。 

如 果 给 一 个 小 部 件 的 四 周 都 添加 间距 ,可 以 使 用 另 一 种 方法 。 在 当前 小 部 件 外 部 创建 
一 个 Container。Container 包含 多 种 属性 ,可 以 设置 子 部 件 的 对 齐 方式 .背景 色 .边框 .阴影 
及 Container 高 度 和 宽度 ,还 可 以 设置 它 的 内 边 距 和 外 边 距 等 ,所 以 可 以 把 标题 放 在 
Container 中 并 设置 它 的 外 边 距 ,代码 如 下 : 


// chapter08/08 - 02/1ib/news. dart 


Container( 
margin: EdgeInsets. only(top:10.0), // 设置 顶部 外 边 距 
child: Text( // 文字 小 部 件 


news[ index][ 'title'], 
), 
), 


Container 还 可 以 设置 padding 内 间距 , 它 和 外 间距 margin 不 同 ,padding 是 Container 
中 的 内 间距 。Container 可 以 替换 成 Padding, Padding 也 是 一 个 小 部 件 ,表示 只 使 用 内 间 
距 , 而 不 使 用 其 他 的 间距 配置 。Container 小 部 件 相对 灵活 而 且 容 易 理解 。 

使 用 哪 种 方式 实现 不 重要 ,重要 的 是 需要 知道 使 用 小 部 件 中 的 哪个 特性 可 以 满足 需求 。 
我 们 通常 使 用 10 一 20 个 常用 的 小 部 件 ,可 能 偶尔 使 用 其 他 不 常用 小 部 件 。 


8.3 文本 小 部 件 Text 和 行 小 部 件 Row 


在 标题 的 后 面 填 加 一 个 资讯 分 数 的 标签 ,并 且 设 置 文本 字体 的 大 小 。 代 码 如 下 : 


// chapter08/08 - 03/1ib/news. dart 


Container( 
margin: EdgeInsets. only(top:10.0), // 资讯 标题 的 外 边 距 
child: Text( 
news[ index][ 'title'], // 标题 文字 
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), 
), 
Text(news[ index][ 'score']. toSstring()), // 资讯 分 数 


在 文本 小 部 件 Text 中 可 以 设置 很 多 参数 ,其 中 参数 style 可 以 设置 字体 和 字体 大 小 等 ， 
它 的 值 类 型 是 TextStyle, 代 码 如 下 : 


// chapter08/08 - 03/1ib/news. dart 


Text( 


news[ index][ 'score'].toString()， // 资讯 分 数 

style: TextStyle( // 字体 样式 
fontSize: 20, // 字体 大 小 
fontWeight: FontWeight. bold // 字体 的 粗细 


), 
), 


把 资讯 分 数 显示 到 资讯 标题 title 的 右 侧 ,需要 使 用 Row 小 部 件 来 实现 ,Row 小 部 件 可 
以 让 它 的 子 部 件 水 平 排列 ,所 以 可 以 在 资讯 标题 和 资讯 分 数 外 面 加 上 Row 小 部 件 。Row 
有 一 个 children 参数 ,把 资讯 标题 Container 和 资讯 分 数 Text 放 在 小 部 件数 组 中 ,代码 
如 下 : 


// Chapter08/08 - 03/1ib/news. dart 


Row( // 行 小 部 件 
children: < Widget >[ 
Container( // 标题 Container 
margin: EdgeInsets. only(top: 10.0)， // 上 边 距 
child: Text( // 文本 小 部 件 
news[ index][ 'title'], // 标题 
), 
), 
Text( // 资讯 分 数 文 本 
news[ index][ 'score']. toString(), // 分 数 
style: TextStyle( // 字体 样式 
fontSize: 20, // 字体 大 小 


fontWeight: FontWeight. bold), // 字体 粗细 


保存 并 重启 应 用 ,会 发 现 资讯 标题 和 资讯 分 数 左 右 排列 了 ,如 图 8.3 所 示 。 


滤 
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图 8.3 Row 的 显示 效果 


我 们 可 以 通过 添加 间距 和 设置 居中 优化 显示 ,代码 如 下 : 
// Chapter08/08 - 03/1ib/news. dart 
Row( // 行 小 部 件 


mainAxisAlignment: MainAxisAlignment.center,， // 水 平 居 中 显示 
children: <Widget >[ 


Container( // 标题 Container 
margin: EdgeInsets. only(top: 10.0)， // 上 边 距 
child: Text( // 文本 小 部 件 
news[ index][ 'title'], // 标题 
), 
), 
SizedBox(width: 10,), // 添加 水 平 间 距 
Text( // 资讯 分 数 文 本 
news[ index][ 'score']. toString(), // 分 数 
style: TextStyle( // 字体 样式 


fontSize: 20, // 字体 大 小 
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fontWeight: FontWeight. bold), // 字体 粗细 


8.4 修饰 小 部 件 BoxDecoration 


我 们 可 以 使 分 数 显示 得 与 众 不 同 ,例如 给 分 数 添加 背景 色 .边框 ` 圆 边 角 等 。 把 文本 小 
部 件 放 到 小 部 件 DecoratedBox 中 , DecoratedBox 可 以 给 它 的 子 部 件 很 容易 地 添加 一 些 修 
饰 。 小 部 件 DecoratedBox 需要 设置 参数 decoration, 参数 decoration 的 值 的 类 型 是 
BoxDecoration。 代 码 如 下 : 


// Chapter08/08 - 04/1ib/news. dart 


DecoratedBox( // 修饰 小 部 件 


decoration: BoxDecoration( // 修饰 参数 decoration 
color: Theme. of (context).accentColor // 设置 颜色 
$s child: Text( // 资讯 分 数 
news[ index][ 'score']. toString(), // 分 数 的 值 
style: TextStyle( // 字体 样式 
fontSize: 20, // 字体 大 小 
fontWeight: FontWeight. bold), // 字体 粗细 
), 
) 


在 BoxDecoration 中 可 以 设置 各 种 各 样 的 样式 ,例如 颜色 、 圆 角 效 果 、 阴 影 效 果 等 。 如 
果 需 要 更 改 为 显示 高 度 、 对 齐 方式 或 添加 边 距 ,就 无 法 通过 DecoratedBox 更 改 。 我 们 可 以 
把 DecoratedBox 替换 成 Container, 因 为 Container 包含 参数 declaration, 这样 就 可 以 更 灵 
活 地 设置 样式 了 。 

在 BoxDecoration 中 参数 BorderRadius 表示 给 Container 加 圆 角 效果 , 它 的 值 可 以 这 
样 写 BorderRadius. circular(5.0) 。 保 存 后 可 以 看 到 圆 角 的 显示 效果 ,如 图 8.4 所 示 。 

有 些 时 候 我 们 需要 使 用 从 表达 式 的 动态 值 中 生成 的 文本 ,可 以 使 用 $ 表示 它 后 面 的 属 
性 或 变量 将 作为 字符 串 的 一 部 分 输出 , 它 会 自动 合并 到 字符 串 。 例 如 只 有 一 个 news 属性 ， 
可 以 这 样 写 '$ news'。news[LindexjL'score']. toString() 表 达 式 ,可 以 写成 '$ {news[Lindexj] 
[L'score']. toString())' 整 个 表达 式 会 被 合并 成 字符 串 ,这 是 Dart 语言 的 特性 。 如 果 使 用 一 
些 特殊 字符 ,这 里 可 以 写成 人 $ $ {news[Lindexj][ 'score']. toString()}'。 
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图 8.4 圆 角 的 显示 效果 


8.5 理解 Expanded 和 Flexible 


我 们 学 习 了 很 多 小 部 件 , 有 两 个 重要 小 部 件 可 以 实现 排列 功能 ,一 个 是 行 Row 小 部 件 ， 
另 一 个 是 列 Column 小 部 件 。 

在 main. dart 文件 中 ,main() 方 法 里 添加 debugPaintSizeEnabled = true, 重 启 应 用 后 
在 模拟 器 上 可 以 看 到 很 多 元 素 创建 的 空间 信息 。 例 如 列 的 方向 \ 行 的 信息 等 ,如 图 8. 5 
所 示 。 

在 news. dart 文件 中 ,让 标题 获得 更 多 空间 ,用 Expanded 小 部 件 把 标题 小 部 件 包 装 上 ， 
代码 如 下 : 


// Chapter08/08 - 05/1ib/news. dart 


Expanded( // 尽 可 能 地 占用 剩余 空间 


child: Container( // 资讯 标题 小 部 件 
margin: EdgeInsets. only(top: 10.0), // 上 边 距 为 10 像素 


child: Text( // 标题 文本 
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图 8.5 行 \ 列 的 空间 和 方向 信息 


news[ index][ 'title'], // 标题 文本 的 值 


保存 ,效果 如 图 8.6 所 示 。 

Expanded 小 部 件 会 在 行 和 列 中 尽 可 能 多 地 占用 空间 ,Expanded 只 在 行 和 列 的 内 部 有 
效 。 用 同样 的 方式 给 分 数 加 一 个 Expanded 小 部 件 ,保存 后 会 发 现 资 讯 标题 和 资讯 分 数 占 
据 了 相同 的 空间 ,但 是 它们 的 空间 都 足够 大 ,而 不 是 与 内 容 的 大 小 相同 。 可 以 看 到 它们 被 平 
均 分 配 了 空间 ,如 图 8.7 所 示 。 

所 以 Expanded 是 一 个 常用 的 小 部 件 , 例 如 希望 子 部 件 获 得 足够 多 的 空间 ,同时 不 会 影 
响 和 缩小 其 他 的 小 部 件 , 它 只 是 尽 可 能 地 占用 剩余 空间 。 

除了 Expanded 小 部 件 ,还 有 小 部 件 Flexible 可 以 实现 类 似 的 效果 。 在 资讯 标题 这 里 
把 Expanded 替换 成 Flexible, 分 数 还 是 用 Expanded, 保存 后 会 发 现 分 数 还 是 占用 很 多 空 
间 ,但 并 不 是 占用 了 整个 自由 空间 ,标题 没有 被 推 到 最 左 侧 , 如 图 8. 8 所 示 。 

但 如 果 把 Flexible 去 掉 ,保存 一 下 会 发 现 分 数 占 用 了 其 余 的 空间 ,如 图 8. 9 所 示 。 
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图 8.7 资讯 分 数 添 加 Expanded 后 的 效果 


NN 万 二 4 NE 


图 8.8 Flexible 的 显示 效果 图 8.9 资讯 标题 去 掉 Flexible 后 的 效果 
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所 以 Flexible 在 这 里 起 到 了 一 定 作 用 。 是 什么 作用 呢 ? Flexible 是 添加 Expanded 和 
没 添加 Expanded 的 一 个 折 中 方案 。Flexible 可 以 理解 为 告诉 同 级 的 其 他 子 部 件 , 可 以 占用 
它们 需要 的 空间 ,但 不 是 所 有 可 用 空间 。 可 以 配置 Flexible 的 fit 参数 , 它 有 两 个 静态 值 ,一 
个 是 FlexFit. loose, 保 存 后 我 们 发 现 它 是 默认 值 ; 另 一 个 是 FlexFit. tight, 保存 后 会 发 现 它 
和 之 前 的 Expanded 一 样 ,因为 这 个 参数 告诉 子 部 件 使 用 尽 可 能 多 的 空间 。 

Flexible 还 可 以 设置 参数 flex, 可 以 传人 整数 ,例如 设置 为 2, 保存 后 发 现 它 比 之 前 占用 
了 多 一 点 的 空间 ,如 图 8. 10 所 示 。 

把 flex 设置 为 10 并 保存 ,会 发 现 这 里 有 一 些 变化 ,如 图 8. 11 所 示 。 


资讯 标题 


gr 


an 


NE NA 


图 8.10 Flexible 中 的 flex 参数 设置 为 2 的 效果 图 8.11 Flexible 中 的 flex 参数 设置 为 10 的 效果 


参数 flex 设置 为 10, 表 示 需 要 更 多 的 空间 ,导致 显示 分 数 这 里 开始 缩小 ,这 是 因为 
flex: 10 告诉 它 可 以 从 其 他 空间 中 获取 10 倍 的 空间 ,开始 缩小 在 同一 行 的 其 他 小 部 件 。 在 
Expanded 中 同样 可 以 使 用 设置 参数 flex, 也 设置 为 10 后 我 们 发 现 显 示 效 果 与 图 8. 7 一 致 。 
需要 注意 的 是 Flexible 和 Expanded 必须 在 行 和 列 中 使 用 。 记 住 Expanded 使 用 的 是 所 有 
可 用 空间 , Flexible 也 可 以 使 用 所 有 的 可 用 空间 ,但 不 是 必须 的 ,可 以 配置 。Flexible 和 
Expanded 都 包含 flex 参数 ,flex 可 以 按 比 例 分 配 空间 。 


8.6 添加 背景 图 像 
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登录 页 面 不 是 很 美观 ,给 它 添加 个 背景 ,准备 一 张 图 片 ,把 它 放 到 项 目 目 录 下 的 assets 
目录 中 ,使 用 这 个 图 片 作 为 登录 背景 图 片 。 在 main. dart 文件 中 ,把 首页 设置 为 登录 页 面 ， 


代码 如 下 : 


// Chapter08/08 — 06/1ib/main. dart 


routes: { 
'/admin': (context) { 
return ManageNews(_addNews,_deleteNews); 
}, 
'/home': (context) { 
return NewsListPage(_news); 
}, 
"/': (context) { 
return AuthPage( ); 
} 


// 导航 路 径 
// 路 径 名 称 
// 资讯 管理 页 面 


// 路 径 名 称 
// 资讯 列表 页 面 


// 首页 导航 路 径 
// 登录 页 面 


在 auth. dart 文件 中 ,使 用 之 前 学 过 的 知识 ,创建 登录 页 面 ,包括 用 户 名 文本 框 及 密码 


文本 框 等 ,代码 如 下 : 


// Chapter08/08 - 06/1ib/pages/auth. dart 
class RuthPage extends StatefulWidget { 
@override 
State < StatefulWidget > createState() { 
return _AuthPageState( ); 
} 
} 


class _AuthPageState extends State < AuthPage> { 
String _username; 
String _password; 
bool accept = false; 
@override 
Widget build(BuildContext context) { 
return Scaffold( 
appBar: AppBar( 
title: Text( ' 登 录 ')， 
), 
body: Column( 
children: <Widget >[ 
TextField( 
decoration: InputDecoration( 


// 登录 小 部 件 


// 覆盖 createState( ) 方 法 
// 返回 登录 小 部 件 状 态 


// 登录 小 部 件 状 态 
// 用 户 名 属性 

// 密码 属性 

// 是 否 接受 条 款 属 性 


// 构建 方法 

// 页 面 小 部 件 

// 导航 栏 

// 导航 栏 上 的 文字 


// 列 小 部 件 

// 小 部 件数 组 
// 用 户 名 文本 框 
// 修饰 文本 框 
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labelText: ' 用 户 名 '， // 文本 框 标题 
filled: true, // 文本 框 是 否 填充 
fillColor: Colors. white), // 文本 框 填充 白色 
onChanged: (value) { // 监听 文本 框 
setState(() { // 更 新 状态 
_username = value; // 更 新 用 户 名 的 值 
D); 
}, 
), 
TextField( // 文本 框 
obscureText: true, // 密码 显示 样式 
decoration: InputDecoration( 
labelText: ' 密 码 '， // 文本 框 标题 
filled: true, // 文本 框 是 否 填充 
fillColor: Colors. white), // 文本 框 填充 白色 
onChanged: (value) { // 监听 文本 框 
setState(() { // 更 新 状态 
_password = value; // 更 新 密码 的 值 
}); 
}, 
), 
SwitchListTile( // 开关 小 部 件 
title: Text(' 接 受 条 款 ')， // 开关 的 标题 
value: _accept, // 开关 的 值 
onChanged: (bool value) { // 改变 开关 的 事件 
setState(() { // 更 新 状态 
_accept = value; // 更 新 开关 的 值 
}); 
}, 
), 
Center( // 居中 显示 小 部 件 
child: RaisedButton( // 有 背景 的 按钮 
child: Text(' 登 录 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 的 单 击 事件 


Navigator. pushReplacementNamed( context, '/home'); 
// 导航 到 资讯 列表 页 面 


在 文本 框 所 在 列 Column 外 面 添加 Container 小 部 件 ,Container 参数 decoration 的 值 
类 型 是 BoxDecoration, 有 一 个 参数 image 是 设置 背景 图 片 的 .可 以 在 这 里 设置 一 张 图 片 。 
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把 鼠标 悬 停 在 image 上 时 ,会 发 现 值 类 型 不 是 一 张 普通 的 图 片 ,而 是 DecorationImage 类 型 
的 图 片 ,于 是 我 们 需要 创建 DecorationImage。DecorationImage 中 也 有 参数 image,image 
的 值 类 型 是 ImageProvider, 表 示 需 要 传人 的 值 是 一 个 类 ,告诉 DecorationImage 如 何 访问 
这 个 图 片 ,而 不 是 一 个 小 部 件 。 这 个 类 是 AssetImage, 在 pubspec. yaml 文件 中 配置 好 图 片 
路 径 后 把 图 片 路 径 传 人 AssetImage 中 即 可 ,代码 如 下 : 


// Chapter08/08 - 06/1ib/pages/auth. dart 


Container( // 登录 页 面 body 中 的 Container 
decoration: BoxDecoration( // 修饰 参数 decoration 
image: DecorationImage( // 背景 图 片 
image: RssetImage('assets/bg. jpg'), // 访问 图 片 的 类 AssetImage 
), 
), 
child: Column // 包含 文本 框 的 列 


保存 并 重启 ,我 们 看 到 这 张 图 片 显示 出 来 了 ,如 图 8. 12 所 示 , 但 是 显示 效果 不 够 理想 。 

背景 图 片 默认 根据 设备 的 宽度 来 定义 宽 高 比 ,所 以 这 里 显示 的 高 度 不 是 很 高 ,但 是 可 以 
在 DecorationImage 中 配置 ,使 用 参数 fit, 它 的 值 是 BoxFit 类 型 的 值 ,我 们 可 以 根据 需要 选 
择 不 同 的 值 , 其 中 BoxFit. cover 表明 不 扭曲 图 像 ,覆盖 整 个 页 面 ,保存 后 如 图 8. 13 所 示 。 


图 8.12 登录 页 面 的 背景 图 片 图 8.13 登录 页 面 的 背景 效果 
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再 设置 Container 中 的 padding 属性 ,代码 如 下 所 示 : 
padding: EdgeInsets.all(10),// 设 置 页 面 body 中 小 部 件 的 内 边 距 


DecorationImage 中 还 可 以 设置 colorFilter 参数 ,表示 改变 图 片 的 显示 。 参 数 
colorFilter 的 值 可 以 通过 ColorFilter. mode() 方 法 设置 。ColorFilter. mode() 方 法 需要 传 
和 人 两 个 参数 ,第 一 个 参数 表示 在 图 片上 添加 琶 加 层 的 颜色 ,我 们 使 用 黑色 Colors. black, 可 
以 给 Colors. black 设置 透明 度 , 例 如 Colors. black. withOpacity (0. 5); 第 二 个 参数 是 
BlendMode, 表 示 颜 色 混 合 模式 ,这 里 使 用 BlendMode. dstATop。 代 码 如 下 : 


// Chapter08/08 - 06/1ib/pages/auth. dart 


DecorationImage( // 背景 图 片 


colorFilter: // 颜色 滤 镜 
ColorFilter. mode( // 颜色 滤 镜 模式 
Colors. black. withOpacity(0.5), // 从 加 层 颜 色 及 透明 度 
BlendMode. dstATop), // 颜色 混合 模式 
fit: BoxFit. cover, // 图 片 覆盖 显示 


保存 后 ,显示 效果 如 图 8. 14 所 示 。 


图 8.14 给 登录 页 面 的 背景 图 片 加 滤 镜 


第 8 章 ”深入 学 习 Flutter 小 部 件 | 129 


在 auth. dart 文件 中 ,如 果 登 录 页 面 显 示 的 内 容 过 多 ,可 以 把 Column 改 成 ListView, 然 
后 在 ListView 外 面 加 一 个 Center 小 部 件 , 保 存 后 发 现 没 有 任何 变化 ,这 是 因为 ListView 
会 自动 占据 整个 页 面 的 高 度 , 所 以 这 里 的 Center 失效 了 。 

我 们 可 以 使 用 另外 一 个 小 部 件 SingleChildScrollView 实现 滚动 ,把 ListView 替换 成 
SingleChildScrollView。SingleChildScrollView 只 能 传递 一 个 child, 然 后 child 对 应 的 小 部 
件 就 具有 滚动 功能 了 ,这 里 可 以 传 和 一 个 Column ,这 样 Column 就 可 以 滚动 了 。 代 码 如 下 : 


// Chapter08/08 - 06/1ib/pages/auth. dart 


child: Center( // 水 平和 垂直 居中 显示 文本 框 


child: SingleChildScrollView( // 使 子 部 件 具 有 滚动 功能 
child: Column( // 列 小 部 件 
children: < Widget >[ // 列 中 的 小 部 件 


保存 后 发 现 文本 框 居中 显示 了 ,而 且 具 有 滚动 功能 ,如 图 8. 15 所 示 。 


图 8.15 居中 显示 文本 框 


8.7 图 标 小 部 件 Icon 


在 应 用 的 资讯 列表 页 面 NewsListPage 中 .我 们 通过 Drawer 实现 了 抽 屠 式 导 航 。 在 文 
件 news_list. dart 中 , 抽 屠 式 导 航 Drawer 使 用 了 ListTile 小 部 件 。ListTile 是 通过 Row 实 
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现 的 , 它 有 一 个 参数 leading, 可 以 把 小 部 件 赋值 给 它 ,leading 会 显示 在 title 的 前 面 。 这 里 
使 用 图 标 小 部 件 Icon ,代码 如 下 : 


// chapter08/08 - 07/1ib/pages/news_list. dart 


ListTile( // 一 行 记录 


leading: Icon(Icons. list), // 记录 标题 前 的 图 标 小 部 件 


title: Text(' 管 理 资讯 ')， // 记录 的 标题 


Flutter 提供 了 非常 多 的 图 片 调用 方式 ,可 以 通过 Icons 加 点 的 方式 调用 。 使 用 同样 的 
方式 ,可 以 给 资讯 管理 页 面 ManageNews 中 抽 层 式 导 航 的 记录 加 小 图 标 。 

在 news. dart 文件 中 ,我 们 使 用 Card 小 部 件 泻 染 每 条 资讯 ,每 条 资讯 的 “详情 ”按钮 都 
是 使 用 FlatButton 实现 的 。 我 们 把 FlatButton 替换 成 IconButton, 输 入 参数 icon, 然 后 传 
入 Icon 小 部 件 。 代 码 如 下 : 


icon: Icon(Icons. favorite_border, size: 20, ) ,人 /设置 图 标 和 图 标的 大 小 


我 们 还 可 以 通过 参数 color 给 图 标 设置 颜色 。 

在 导航 栏 AppBar 中 也 可 以 添加 图 标 。 例 如 在 资讯 列表 NewsListPage 页 面 中 ,给 
AppBar 设置 另外 一 个 参数 actions ,actions 中 的 小 部 件 是 添加 在 标题 后 面 的 按钮 ,这 里 可 以 
使 用 图 标 按钮 ,例如 IconButton, 然 后 添加 单 击 事件 ,代码 如 下 : 


// chapter08/08 - 07/1ib/pages/news_list. dart 


appBar: RppBar( // 资讯 列表 页 面 中 的 导航 栏 


actions: <Widget >[ // 导航 栏 后 的 按钮 
IconButton( // 图 标 按钮 
icon: Icon(Icons. favorite), // 图 标 
onPressed: () {}, // 图 标 按钮 的 单 击 事件 
) 
J, 
title: Text(' 资 讯 标 题 ')， // 导航 栏 的 标题 


), 


8.8 封装 小 部 件 


章 实现 了 很 多 功能 ,浏览 项 目 代码 后 发 现 一 些 文件 中 的 代码 非常 长 ,例如 news. dart 

文件 中 包含 大 量 的 逻辑 ,这 种 编写 方式 没有 问题 ,但 是 封装 一 些 内 容 形 成 单独 的 小 部 件 会 更 

好 。 例 如 资讯 分 数 这 里 ,后 面 我 们 可 能 会 重用 它 ,所 以 应 该 把 资讯 分 数 保存 在 一 个 单独 的 小 
部 件 中 。 

在 项 目的 lib 目录 下 .新建 一 个 目录 widgets。 应 用 中 的 页 面 放 到 lib 目录 下 的 pages 目 
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录 下 , 自 定义 的 小 部 件 放 在 widgets 目录 下 。 自 定义 的 小 部 件 不 需要 导航 ,然后 在 widgets 
目录 下 建 一 个 子 目 录 news, 在 news 中 创建 score. dart 文件 。 

首先 引入 material 包 , 创 建 类 Score, 继 承 一 个 StatelessWidget。Score 不 会 改变 内 部 
数据 , 它 只 从 外 部 接收 数据 ,然后 再 根据 接收 的 值 显示 。 这 里 需要 定义 一 个 属性 final 
String score, 同 时 创建 构造 器 。 在 build() 方 法 中 返回 News 小 部 件 中 显示 分 数 的 代码 片 


段 ,代码 如 下 : 


// chapter08/08 - 08/1ib/widgets/news/score. dart 


class Score extends StatelessWidget { 
final String score; 
Score(this. score); 


@override 
Widget build(BuildContext context) { 
return Container( 
decoration: BoxDecoration( 
color: Theme. of (context).accentColor, 
borderRadius: BorderRadius.circular(5.0)), 
child: Text( 
'$ score', 
style: TextStyle(fontSize: 20, 
fontWeight: FontWeight. bold), 
), 
二 
} 
} 


// 自 定义 的 分 数 小 部 件 
// 分 数 小 部 件 中 的 属性 
// 分 数 小 部 件 的 构造 器 


// 构建 方法 

// 返回 Container 
// 修饰 分 数 

// Container 的 颜色 
// 圆 角 效果 

// 文本 子 部 件 

// 文本 的 值 

// 文本 的 字体 大 小 
// 文本 的 粗细 程度 


现在 把 Score 小 部 件 引 入 到 需要 使 用 的 地 方 , 在 news. dart 文件 中 ,把 Score 引入 ,在 引 
和 之 前 ,把 News 小 部 件 也 放 到 news 的 目录 下 ,因为 News 小 部 件 也 不 是 一 个 页 面 ,然后 在 


标题 下 面 添加 Score 小 部 件 ,代码 如 下 : 


Score(news[ index][ 'score'].toString()) 


// 使 用 资讯 分 数 Score 小 部 件 


现在 我 们 的 代码 更 易 读 了 。 提 取 小 部 件 不 应 该 超级 精细 ,而 是 选择 较 多 的 内 容 创 建 自 


己 的 小 部 件 。 


8.9 重 构 项 目 代 码 


在 news. dart 文件 中 ,我 们 自 定义 了 News 小 部 件 。 它 包含 一 个 ListView 列表 ,资讯 
列表 是 使 用 ListView 中 的 builder() 方 法 创建 的 。 下 面 把 ListView 中 的 Card 放 到 一 个 单 
独 的 小 部 件 中 ,在 widgets 目录 下 的 news 目录 中 ,创建 news_card. dart 文件 ,然后 和 之 前 一 
样 引入 material 包 ,创建 一 个 类 NewsCard 继承 StatelessWidget。 

通常 在 Flutter 应 用 中 大 部 分 的 小 部 件 是 StatelessWidget, 当 传人 这 些小 部 件 的 数据 变 
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化 时 需要 重新 构建 。 在 build() 方 法 中 返回 ListView 中 的 Card。 代 码 如 下 : 


// Chapter08/08 - 09/1ib/widgets/news/news_card. dart 


@override 
Widget build(BuildContext context) { // NewsCard 中 的 build() 方 法 
return Card( // Card 小 部 件 
child: Column( // Card 小 部 件 中 的 列 
children: < Widget >[ // 列 中 的 一 些小 部 件 
Image.asset(news[ index]['image'])， // Card 中 的 图 片 


SizedBox( 
height: 10.0, 
), 


// 无 显示 内 容 泻 染 
// 添加 10 像素 间距 


Row( // 行 小 部 件 
mainAxisAlignment: MainAxisAlignment. center, // 居中 对 齐 
children: < Widget >[ // 行 中 一 些小 部 件 
Container( // Container 小 部 件 
margin: EdgeInsets. only(top: 10.0), // 标题 间距 
child: Text( // 文本 小 部 件 
news[ index][ 'title'], // 文本 中 的 值 


), 
), 


SizedBox( // 行 中 的 水 平 间 距 
width: 10, // 宽度 为 10 像素 
), 
Score(news[ index][ 'score']. toString()) // Score 小 部 件 
J, 
), 
ButtonBar( // 按钮 栏 
alignment: MainAxisAlignment. center, // 居中 对 齐 
children: < Widget >[ // 按钮 栏 中 的 小 部 件 
IconButton( // 图 标 按钮 
icon: Icon( // 图 标 
Icons. favorite_ border, // 空心 收藏 图 标 
size: 20, // 图 标的 大 小 
color:Colors. red, ), // 图 标的 颜色 
onPressed: () => // 图 标的 单 击 事件 


Navigator. pushNamed < bool >( context, '/news/' + index.toString()) 


// 导航 到 详情 页 


.then( (value) {}), // 返 回 到 当前 页 面 时 调用 
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在 返回 的 Card 中 需要 获取 数组 news 的 数据 和 索引 。NewsCard 小 部 件 只 需要 获得 
news 数组 中 的 某 一 个 news 即 可 。 在 NewsCard 中 添加 一 个 属性 news ,代码 如 下 : 


final Map < String, dynamic > news; // 数组 news 中 的 某 一 条 news 
然后 添加 构造 器 ,代码 如 下 : 
NewsCard( this. news) 7 // NewsCard 的 构造 器 


news_card. dart 中 的 news[index] 都 可 以 替换 成 news, 同 时 还 可 以 引入 Score 小 部 件 ， 
当 单 击 “详情 ”按钮 时 传人 当前 news 对 应 的 索引 ,所 以 在 NewsCard 中 再 添加 一 个 属性 
index, 代 码 如 下 : 


// Chapter08/08 - 09/1ib/widgets/news/news_card. dart 


final Map < String, dynamic > news; // 数组 news 中 的 某 一 条 news 
final int index; // 某 一 条 news 对 应 的 索引 


NewsCard(this. news, this. index) ; // NewsCard 的 构造 器 


在 news. dart 文件 中 ,引入 NewsCard ,删除 _buildNewsItem() 方 法 ,然后 只 需要 在 参数 
itemBuilder 后 传人 (BuildContext context ,int index) ,方法 中 返回 NewsCard (news 
[index],index) ,代码 如 下 : 


// Chapter08/08 - 09/1ib/widgets/news/news. dart 


newsCard = ListView.builder( // News 小 部 件 中 列表 


itemBuilder: (BuildContextcontext ,int index){ 
return NewsCard(news[ index], index) ; // 构造 每 条 news 
} 
itemCount : news. length, // 数组 news 的 长 度 


) 


8.10 创建 标准 化 的 小 部 件 


让 我 们 把 资讯 标题 提取 出 来 ,创建 为 一 个 标准 化 的 自 定 义 小 部 件 。 因 为 在 列表 页 面 中 
使 用 了 资讯 标题 ,在 资讯 详情 页 也 使 用 了 资讯 标题 ,所 以 可 以 把 资讯 标题 提取 出 来 作为 一 个 
单独 的 小 部 件 。 

在 widgets 目录 下 新 建 一 个 目录 ui_element, 然 后 新 建 title_defaut. dart 文件 ,引入 
material 包 ,创建 类 TitleDefault ,继承 StatelessWidget, 再 覆盖 build() 方 法 ,在 build() 方 法 
中 返回 资讯 列表 中 的 标题 ,代码 如 下 : 
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// Chapter08/08 - 10/1ib/widgets/ui element/title defaut. dart 


@override 
Widget build(BuildContext context) { // 标题 小 部 件 的 构建 方法 
return Container( 
margin: EdgeInsets.only(top: 10.0), // 距 上 边 距 为 10 像素 
child: Text( // 文本 小 部 件 
title, // 标题 属性 


)， 
) 
} 


给 TitleDefault 加 String 类 型 的 属性 title, 然 后 添加 一 个 构造 器 ,参数 和 这 个 属性 绑 
定 ,这 样 在 资讯 详情 页 就 可 以 重用 标题 小 部 件 了 。 

在 NewsCard 小 部 件 中 ,引入 TitleDefault 小 部 件 ,然后 在 标题 处 使 用 ,并 且 传人 这 条 
news 的 标题 ,代码 如 下 所 示 : 


TitleDefault(news[ 'title']), // 在 NewsCard 中 使 用 标题 小 部 件 


在 资讯 详情 页 NewsDetailPage 中 使 用 TitleDefault 标题 小 部 件 ,首先 引入 title_ 
default. dart, 然 后 将 使 用 标题 的 部 分 换 成 TitleDefault。 这 样 TitleDefault 标题 小 部 件 就 被 
标准 化 了 。 我 们 可 以 细 化 所 有 内 容 , 然 后 封装 到 自己 的 小 部 件 中 ,不 过 最 好 封装 内 容 较 多 并 
且 可 重用 的 部 分 。 


8.11 封装 小 部 件 的 方法 


我 们 可 以 将 更 多 小 部 件 或 更 多 代码 片段 提取 到 自 定 义 的 小 部 件 中 。 我 们 需要 在 封装 的 
过 程 中 找到 恰当 的 平衡 点 ,不 要 过 度 封 装 。 除 了 可 以 将 共用 的 小 部 件 放 到 自 定义 的 小 部 件 
中 ,还 可 以 将 build() 方 法 中 的 代码 片段 移动 到 这 个 小 部 件 的 辅助 方法 中 。 例 如 在 之 前 的 章 
节 中 ,我 们 在 News 小 部 件 中 ,添加 的 _buildNewsItem() 方 法 就 是 辅助 方法 ,这样 可 以 精简 
build() 方 法 。 

在 create_news. dart 文件 中 ,创建 了 很 多 文本 框 。 不 用 把 这 些 文本 框 封装 到 单独 的 小 
部 件 中 , 可 以 为 这 些小 部 件 创 建 单独 的 方法 ,例如 把 用 户 名 这 段 代 码 放 到 
buildTitleTextField() 方 法 中 ,代码 如 下 ， 


// chapter08/08 - 11/1ib/pages/create news. dart 


Widget buildTitleTextField() { // 构建 标题 的 方法 


return Container( 
margin: EdgeInsets.all(10.0), // 标题 的 外 边 距 


child: TextField( // 文本 框 小 部 件 
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decoration: InputDecoration(labelText:“' 资 讯 标题 '),// 标 题 


onChanged: (String value) { // 监听 文本 框 中 改变 的 事件 
setState(() { // 更 新 数据 并 重新 泻 染 
_title = value; // 设置 标题 属性 的 值 


D; 


在 build() 方 法 中 只 需 简单 地 调用 buildTitleTextField() 方 法 即 可 。 使 用 同样 的 方法 
可 以 把 其 他 的 文本 框 小 部 件 封装 到 方法 中 。 封 装 后 在 build() 方 法 中 可 以 直接 调用 ,代码 如 
下 所 示 : 


// Chapter08/08 - 11/1ib/pages/create_news. dart 


return Scaffold( // 创建 资讯 页 面 
body: ListView( // 可 以 滚动 的 页 面 
children: < Widget >[ // ListView 中 的 子 部 件 
buildTitleTextField()， // 构建 资讯 标题 的 方法 
buildDescTextField( ), // 构建 资讯 描述 的 方法 


buildScoreTextField( ), // 构建 资讯 分 数 的 方法 


我 们 可 以 把 按钮 的 单 击 事件 方法 抽取 出 来 ,实现 按钮 的 显示 和 逻辑 解 耦 。 在 
CreateNewsPage 中 ,添加 一 个 方法 _submitForm() ,返回 值 为 void, 然 后 把 单 击 事件 中 的 方 
法 内 容 放 到 _submitForm() 方 法 中 .代码 如 下 : 


// Chapter08/08 - 11/1ib/pages/create_news. dart 


void _submitForm(){ // 封装 创建 按钮 的 单 击 事件 


Map < String, dynamic > news = { // 创建 一 个 Map 类 型 的 news 
'title': _title, // 给 标题 赋值 
'image': 'assets/newsl. jpg’', // 图 片 使 用 硬 编码 方式 赋值 
"description': description, // 给 资讯 描述 赋值 
'score': _score // 给 资讯 赋值 
}; 
widget. addNews (news); // 调用 新 增资 讯 方 法 
Navigator. pushReplacementNamed( context, '/'); // 导航 到 资讯 列表 


} 


然后 把 方法 _submitForm() 的 引用 赋值 给 onPressed 单 击 事件 ,注意 只 是 引用 ,所 以 
_submitForm 后 面 没 有 小 括号 ,表示 这 个 按钮 被 单 击 的 时 候 才 执行 _submitForm() 方 法 ,这 
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些 辅助 方法 使 create_news. dart 中 的 代码 非常 清晰 。 我 们 使 用 同样 的 方式 可 以 优化 登录 页 
面 auth. dart 资讯 管理 页 ManageNews、NewsCard 小 部 件 等 内 容 。 


8.12 Flutter 中 响应 式 设计 


当前 应 用 的 布局 现在 看 上 去 不 错 ,例如 登录 页 面 如 图 8. 16 所 示 。 


图 8.16 应 用 的 登录 页 面 
但 是 , 当 把 模拟 器 横 过 来 的 时 候 , 显 示 如 图 8. 17 所 示 。 


图 8.17 模拟 器 横 屏 显示 
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使 用 没有 问题 ,但 可 以 优化 显示 效果 。 例 如 文本 框 所 在 的 Container 不 应 占用 全 部 的 
宽度 ,而 是 给 Container 指定 一 个 宽度 。 我 们 可 以 根据 不 同 的 屏幕 大 小 或 者 屏幕 的 方向 适 
配 显示 。Flutter 中 的 MediaQuery 可 以 帮助 我 们 完成 这 些 工 作 。 怎 样 使 用 MediaQuery 
呢 ? 在 auth. dart 文件 中 ,没有 限制 屏幕 的 宽度 ,所 以 默认 它 会 占 满 屏 幕 的 宽度 。 将 一 些 内 
容 显 示 到 指定 的 位 置 , 并 给 一 些小 部 件 设 定 宽度 。 在 Container 中 有 个 参数 alignment, 可 
以 设置 成 Alignment. center, 表 示 居 中 显示 。Container 可 以 定义 宽度 width, 例 如 设置 成 
200 像素 ,代码 如 下 : 


// Chapter08/08 - 12/1ib/pages/auth. dart 


child: Container( // 登录 页 面 的 body 


alignment: Alignment. center, // 居中 显示 
child: SingleChildScrollView( // 使 子 部 件 可 以 滚动 
child: Container( // 给 列 添加 Container 
width: 200, // 宽度 设置 为 200 像素 
child: Column( // 列 小 部 件 
children: < Widget >[ // 列 中 的 小 部 件 


buildUsernameTextField(), // 构建 用 户 名 小 部 件 


竖 屏 显示 效果 如 图 8. 18 所 示 。 


图 8.18 竖 屏 显示 效果 
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横 屏 显示 效果 如 图 8. 19 所 示 。 


图 8.19 横 屏 显示 效果 


可 以 看 到 无 论 在 哪个 方向 都 是 显示 200 像素 这 个 宽度 ,我 们 希望 的 是 在 不 同 的 屏幕 模 
式 显示 不 同 的 宽度 ,下 一 节 将 讲解 如 何 使 用 MediaQuery 来 实现 。 


8.13 使 用 MediaQuery 


现在 不 同 的 屏幕 模式 显示 的 是 相同 的 宽度 ,我 们 不 希望 竖 屏 和 横 屏 都 是 这 个 宽度 。 例 
如 只 想 在 横 屏 时 使 用 一 定数 量 的 像素 来 定义 宽度 ,我 们 可 以 通过 MediaQuery 实现 这 样 的 
功能 。MediaQuery 有 个 of() 方 法 ,参数 是 context, 我 们 从 context 获取 设备 的 数据 。 例 如 
我 们 可 以 通过 MediaQuery. of(context). orientation 来 判断 当前 设备 是 横 屏 还 是 竖 屏 ,还 可 
以 使 用 MediaQuery. of (context). size 访问 当前 设备 的 高 度 和 宽度 ,例如 获取 宽度 
MediaQuery. of (context). size. width ,这样 就 可 以 设置 Container 的 宽度 了 ,代码 如 下 : 


width:MediaQuery. of(context). size.widthx 0.8 // 整 个 设备 宽度 的 80% 


现在 无 论 横 屏 还 是 竖 屏 显示 得 都 很 好 , 横 屏 显示 效果 如 图 8. 20 所 示 。 


8.20 横 屏 显 示 
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竖 屏 显示 效果 如 图 8. 21 所 示 。 


8.21 竖 屏 显示 效果 


我 们 可 以 把 这 个 宽度 放 到 build() 方 法 的 变量 中 ,代码 如 下 : 


// Chapter08/08 - 13/1ib/pages/auth. dart 

// 获取 设备 的 宽度 

final double deviceWidth = MediaQuery. of(context). size.width; 

// 最 终 宽 度 , 如 果 设 备 的 宽度 大 于 768. 0 像素 ,宽度 设置 为 500, 否则 是 当前 宽度 的 //80s 

final targetWidth = deviceWidth> 768.0 ?500.0:deviceWidth * 0.8; 

下 面 的 参数 width 可 以 使 用 targetWidth 设置 。MediaQuery 非常 强大 , 它 可 以 访问 设 
备 屏 幕 的 大 小 、 访 问 屏幕 的 方向 ,还 可 以 在 任何 条 件 下 使 用 它 来 呈现 不 同 的 内 容 。 例 如 ,如 
果 屏 幕 的 宽度 大 于 550 像素 ,可 以 返回 不 同 的 小 部 件 , 或 者 在 方法 中 判断 MediaQuery 方 
向 ,然后 返回 不 同 的 小 部 件 。 


8.14 ListView 中 使 用 MediaQuery 


在 创建 资讯 页 面 create_news. dart 中 ,首先 获取 设备 的 宽度 final double deviceWidth 二 
MediaQuery. of (context ). size. width, 然后 获取 最 终 的 宽度 final targetWidth = 
deviceWidth > 768.0 ? 500. 0:deviceWidthX0.8。 

给 页 面 Scaffold 中 的 Container 设置 宽度 为 targetWidth, 但 是 设置 的 宽度 还 没有 生效 ， 
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这 是 因为 ListView 是 一 个 很 特殊 的 小 部 件 , 默 认 ListView 小 部 件 会 使 用 所 有 的 可 用 宽度 ， 
所 以 ListView 小 部 件 很 特殊 ,需要 注意 。 那 么 如 何 设置 ListView 列表 的 宽度 呢 ? 可 以 使 
用 参数 padding 设置 ,代码 如 下 : 

final targetPadding = (deviceWidth - targetWidth)/2; // 列表 内 边 距 

把 targetPadding 赋值 给 ListView 中 的 padding 参数 ,代码 如 下 : 


// Chapter08/08 - 14/1ib/pages/create news. dart 
padding: EdgeInsets. symmetric( horizontal:targetPadding), // 赋 值 


保存 并 重启 应 用 后 ,显示 如 图 8. 22 所 示 。 


8.22 ”ListView 中 的 参数 padding 


8.15 使 用 GestureDetector 添加 监听 


Flutter 中 有 一 个 很 特别 的 小 部 件 GestureDetector, 它 可 以 创建 自 定义 的 按钮 ,在 
create_news. dart 文件 中 ,注释 掉 RaisedButton, 创建 自 定 义 的 按钮 。 首先 创建 一 个 
Container ,配置 颜色 color, 添 加 内 间距 为 5 像素 ,再 添加 一 个 子 部 件 Text, 代 码 如 下 : 


// Chapter08/08 - 15/1ib/pages/create news. dart 


Container( 
padding: EdgeInsets.all(5.0), 
color: Theme. of (context).accentColor, 
child: Text(' 创 建 ')， 
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// 内 边 距 
// 按钮 的 背景 色 
// 按钮 上 的 文字 


此 时 这 个 按钮 不 是 很 美观 并 且 没有 办 法 使 用 ,因为 这 个 自 定 义 按钮 上 面 没有 任何 监听 


事件 ,所 以 单 
可 以 给 Container 添加 单 击 事件 ,还 可 以 添加 其 他 事件 


GestureDetector 中 包含 参数 child, 把 child 的 值 设 


在 就 可 以 监听 某 ,例如 在 IDE 中 输入 on 会 得 


SecondaryTapDown: 
SecondaryTapUp: 
Tap: 

TapCancel: 
TapDown: 

TapUp: 


VerticalDragCancel: 
VerticalDragDown: 
VerticalDragEnd: 
VerticalDragstart: 
VerticalDragUpdate: 
riantationBLdr 


fi 它 没 有 任何 反应 。Flutter 中 可 以 使 用 GestureDetector 包装 任何 元 素 ,不 仅 


,例如 长 按 事件 、 拖 中 事件 等 。 
置 成 这 个 自 定义 按钮 Container, 现 
到 很 多 的 提示 ,如 图 8. 23 所 示 。 


void Function() 


A tap with a primary button has occurred 


Flutter 


图 8. 23 ”GestureDetector 中 的 事件 


I 
mm 


使 用 GestureDetector 可 以 
各 样 的 事件 都 可 以 实现 。 这 里 使 用 onTap 事件 ,表示 站 


听 常 用 的 单 击 、 双 击 、 


长 按 、 拖 忠 , 或 者 是 从 上 向 下 滑 , 各 种 
hE 击 ,然后 把 _submitForm() 方 法 引用 


并 赋值 给 onTap。 这 样 就 可 以 单 击 自 定义 按钮 创建 资讯 了 。 


8.16 总 结 


本 章 内 容 非常 重要 ,在 本 章 我 们 进一步 学 习 了 小 部 件 ,并 且 掌 握 了 如 何 使 用 它们 达到 我 
们 想 要 的 效果 。 我 们 首先 学 习 了 小 部 件 的 分 类 ,官网 上 有 非常 多 的 小 部 件 ,它们 之 间 可 以 互 


相 替 代 来 实现 同样 的 功能 。 我 们 只 需 
小 部 件 都 掌握 。 


有 几 个 非常 重要 的 小 部 件 Container、 Row、Co 


要 掌握 10 一 20 个 常用 小 部 件 , 所 以 不 用 担心 把 所 有 的 


lumn、ListView、 各 种 各 样 的 按钮 、 


SizedBox、TextField、Icon、Image、Scaffold。 这 些小 部 件 可 以 灵活 配置 不 同 的 参数 。 官 方 文 


档 和 IDE 会 给 我 们 很 多 提示 和 帮 


,告诉 我 们 如 何 使 用 这 些小 部 件 ,最 好 的 方式 是 使 用 这 


些小 部 件 实现 一 些 功 能 ,这 样 能 很 好 地 领会 如 何 使 用 并 组 合 它们 。 


实现 一 个 功能 可 以 通过 不 同 的 方式 ,没有 标准 说 咀 


种 方式 是 对 的 或 者 是 错 的 。 我 们 还 
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学 习 了 优化 代码 ,使 它 更 易 读 。 不 要 把 所 有 的 内 容 都 写 到 一 个 文件 中 ,建议 大 家 把 它们 分 离 
出 来 ,如 果 编 写 一 个 小 部 件 超过 了 500 行 的 代码 ,建议 大 家 把 它 拆 分 开 。 我 们 还 可 以 把 一 些 
内 容 拆 分 成 方法 ,这 样 保证 代码 的 易 读 性 。 最 后 我 们 学 习 了 使 用 MediaQuery 获取 设备 的 
宽度 .高度 和 方向 。 我 们 还 学 习 了 在 行 、 列 小 部 件 中 结合 Expanded、Flexible 来 占用 空间 ， 
使 用 GestureDetector 为 小 部 件 定义 各 种 各 样 的 监听 事件 。 


Form 表单 


Flutter 项 目 在 逐步 完善 ,在 程序 中 允许 用 户 登录 ,还 可 以 根据 用 户 输入 的 内 容 创 建 资 
讯 。 我 们 通过 TextField 小 部 件 获 取 资 讯 的 录入 信息 ,但 是 没有 验证 用 户 输入 的 信息 。 例 
如 非 空 验证 等 ,这 一 章 我 们 学 习 以 更 好 的 方式 处 理 用 户 输入 的 内 容 ,同时 验证 输入 内 容 并 


9.1 表单 文本 框 TextFormField 


如 果 有 Web 开发 背景 ,可 能 会 知道 表单 Form 是 什么 。Form 简单 来 说 就 是 一 组 用 户 
输入 ,就 像 创建 资讯 页 面 create_news. dart 中 的 文本 框 一 样 。Form 把 这 些 文本 框 管理 成 一 
组 , 当 用 户 提 交 时 ,可 以 添加 验证 功能 ,检查 它们 是 否 合法 。 换 句 话 说 ,Form 使 我 们 能 更 简 
单 地 管理 一 些 关 联 的 文本 框 。 

在 create_news. dart 中 有 很 多 文本 框 ,可 以 使 用 Form 管理 它们 ,要 实现 这 样 的 功能 ， 
需要 一 个 专用 的 小 部 件 Form ,把 它 加 在 ListView 小 部 件 的 外 面 。 代 码 如 下 : 


// Chapter09/09 - 01/1ib/pages/create_news. dart 


Form( // 表单 小 部 件 
child: ListView( // 滚动 的 列表 
padding: // 列表 内 间距 
EdgeInsets. symmetric(horizontal: targetPadding), 

children: <Widget >[ // 列表 子 部 件 
buildTitleTextField( ), // 标题 文本 框 
buildDescTextField( ), // 描述 文本 框 


buildScoreTextField( ), // 分 数 文本 框 


Form 是 一 个 小 部 件 , 它 包含 在 该 表单 中 管理 所 有 的 用 户 输入 。Form 的 子 部 件 可 以 是 
一 个 列表 ,也 可 以 是 一 个 列 或 是 一 个 包含 列 的 Container。 保 存 并 重启 后 ,在 创建 资讯 页 面 
没有 看 到 有 什么 变化 ,这 是 因为 Form 是 一 个 不 可 见 的 小 部 件 , 但 它 允 许 我 们 在 内 部 以 不 同 
的 方式 使 用 文本 框 中 的 值 。 
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首先 改变 现 有 的 文本 域 ,在 _buildTitleTextField ( ) 方 法 中 , 把 TextField 改 成 
TextFormField。TextFormField 是 一 个 特殊 的 TextField, 它 可 以 添加 到 Form 小 部 件 中 。 
把 onChanged() 方 法 删除 ,使 用 另外 一 种 方式 管理 TextFormField 中 的 值 。Form 将 作为 
集合 进行 管理 ,因此 我 们 需要 以 不 同 的 方式 来 管理 每 个 字段 的 值 。 

Form 中 的 TextFormField 有 个 参数 onSaved, 它 的 值 是 个 方法 ,表示 当 整 个 表单 被 提 
交 时 ,这 个 方法 就 会 被 执行 ,所 以 给 参数 onSaved 创建 一 个 方法 ,onSaved 方法 需要 一 个 
String 类 型 的 参数 value。 可 以 先 把 value 打印 显示 出 来 。 代 码 如 下 : 


// Chapter09/09 - 01/1ib/pages/create_news. dart 


Widget buildTitleTextField() { // 资讯 标题 文本 框 构建 方法 


return TextFormField( // 表单 文本 框 小 部 件 
onSaved: (String value){ // 提交 表单 时 会 执行 这 个 方法 


}, 


什么 时 候 会 触发 onSaved 对 应 的 方法 呢 ? 需 要 人 为 操作 ,这 个 方法 才 会 被 触发 。 表 单 
Form 有 个 参数 key, 表 示 全 局 的 密 钥 。 密 钥 是 某 种 标识 符 ,允许 我 们 从 应 用 的 其 他 部 分 访 
问 此 表单 对 象 。 全 局 变量 不 仅 可 以 用 于 表单 中 ,还 可 以 使 用 在 其 他 地 方 ,通常 使 用 全 局 变量 
与 应 用 中 其 他 的 小 部 件 进行 交互 。 在 _CreateNewsPageState 中 ,创建 一 个 final 修饰 的 
key, 类 型 是 GlobalKey。GlobalKey 表示 在 这 个 小 部 件 中 可 以 在 任何 地 方 使 用 它 。 
GlobalKey 的 泛 型 是 < FormState >, 表 示 这 是 一 个 表单 状态 的 全 局 变量 。 表 单 状态 会 提供 
一 些 帮助 方 法 ,将 Form 作为 一 个 整体 执行 。 可 以 给 表单 的 全 局 变量 定义 一 个 名 字 , 例 如 
_formkey ,然后 创建 一 个 GlobalKey < FormState > 对 象 保存 Form 的 状态 。 代 码 如 下 : 

// 创 建 表单 的 key,key 中 保存 表单 的 状态 

final GlobalKey < FormState > formkey = GlobalKey < FormState>(); 

现在 把 _formkey 赋值 给 Form 中 的 key 参数 。 当 单 击 “ 创 建 " 按 钮 时 ,_submitForm() 
方法 被 调用 。 在 方法 中 可 以 使 用 全 局 变量 _formkey._formkey. currentState 可 以 访问 表单 
状态 对 象 ,表单 状态 对 象 有 个 save() 方 法 。 当 调用 save() 方 法 的 时 候 ，formKey 返回 的 
currentState 会 与 Form 小 部 件 建 立 联系 ,然后 每 个 TextFormField 中 的 参数 onSaved 对 应 
的 方法 被 执行 。 这 样 就 可 以 使 用 onSaved 对 应 的 方法 来 设置 属性 中 的 每 个 值 ,例如 资讯 标 
题 的 值 .资讯 描述 的 值 等 。 代 码 如 下 : 


// chapter09/09 - 01/1ib/pages/create news. dart 


void _submitForm() { // 提交 表单 的 方法 
_formkey. currentState. save( ); // 触发 每 个 TextFormField 调用 
// onSaved 对 应 的 方法 
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在 onSaved 对 应 的 方法 中 ,setState() 方 法 可 以 给 属性 赋值 ,代码 如 下 : 


// Chapter09/09 - 01/1ib/pages/create_news. dart 


return TextFormField( // 标题 文本 框 


onSaved: (String value) { // 提交 表单 时 触发 
setState(() { // 重新 浑 染 页 面 
_title = value; // 赋值 资讯 标题 属性 


DD); 
I 


所 以 快速 实现 这 个 功能 需要 把 打印 去 掉 , 然 后 调用 setState() 方 法 。 下 一 节 我 们 看 一 
下 表单 的 验证 功能 。 


9.2 ”Form 表单 验证 


上 一 节 我 们 学 习 了 如 何 从 Form 中 获取 值 ,那么 怎样 验证 表单 呢 ? 表单 Form 可 以 验 
证 多 个 文本 框 中 的 值 ,这 样 能 保证 用 户 的 输入 是 正确 的 。 在 TextFormField 中 ,有 个 参数 
validator, 需 要 传人 一 个 方法 ,把 鼠标 悬 停 在 上 面 后 会 发 现 方法 需要 传人 一 个 String 类 型 参 
数 , 方 法 参数 的 值 是 文本 框 中 输入 的 内 容 。 它 的 返回 值 也 是 一 个 String 类 型 ,如果 验 证 失 
败 返回 String 类 型 的 错误 信息 ,如 果 成 功 的 话 可 以 返回 null 或 者 什么 也 不 返回 。 

在 方法 体 中 ,可 以 添加 验证 逻辑 ,如 果 返 回 了 内 容 就 说 明 验 证 失败 了 。 例 如 验证 这 个 资 
讯 标题 的 值 ,代码 如 下 


// Chapter09/09 - 02/1ib/pages/create_news. dart 


Widget buildTitleTextField() { // 资讯 标题 文本 框 


return TextFormField( // 表单 文本 框 
validator: (String value){ // 验证 文本 框 中 的 值 
if(value. trim(). length == 0){ // 判断 是 否 为 空 
return ' 资 讯 标 题 不 能 为 空 '; // 为 空 提示 的 字符 串 
} 
return null; // 返回 null 时 表示 通过 验证 


}, 


value. trim() 可 以 保证 去 掉 值 前 后 的 空格 。length 可 以 判断 用 户 输入 的 长 度 。 当 资讯 
标题 文本 框 中 的 值 为 空 时 返回 一 个 字符 串 , 当 不 为 空 时 返回 null。 

要 实现 验证 功能 还 需要 设置 验证 机 制 ,有 两 种 方式 。 第 一 种 在 TextFormField 中 配置 
autovalidate:true, 保 存 后 ,模拟 器 上 已 经 显示 验证 结果 了 ,如 图 9. 1 所 示 。 

当 我 们 在 资讯 标题 文本 框 中 输入 任意 内 容 后 ,错误 信息 就 会 消失 。 如 果 把 输入 的 内 容 
删 掉 ,错误 提示 又 显示 了 ,但 是 这 样 的 验证 方式 有 个 缺点 ,在 用 户 什么 都 没有 输入 的 情况 下 ， 
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9.1 表单 验证 


页 面 就 会 显示 错误 信息 。 

第 二 种 方法 是 在 提交 之 前 进行 验证 ,在 调用 _formkey. currentState. save() 方 法 之 前 ， 
加 上 _formkey. currentState. validate() ,validate() 方 法 会 调用 在 Form 表单 中 的 所 有 文本 
框 的 validate 中 的 方法 。 如 果 _formkey. currentState. validate() 返 回 true, 那 么 表示 表单 中 
所 有 文本 框 都 通过 验证 了 。 如 果 Form 中 任意 一 个 文本 框 验证 失败 就 会 返回 false。 这 样 我 
们 就 可 以 验证 表单 了 ,代码 如 下 : 


// Chapter09/09 - 02/1ib/pages/create_news. dart 


void _submitForm() { // 创建 按钮 单 击 事件 调用 方法 
if(!_formkey. currentState. validate()){ // 没有 通过 表单 验证 
return; // 不 执行 后 续 代 码 
} 
_formkey. currentState. save(); // 触发 文本 框 中 的 onSaved 


9.3 表单 Form 的 高 级 验证 


在 资讯 标题 这 里 已 经 验证 不 能 为 空 了 ,让 我 们 再 加 一 个 验证 条 件 , 在 value. trim (). 
length 二 二 0 后 面 加 上 | ,表示 这 两 个 条 件 只 要 有 一 个 成 立 , 就 会 执行 方法 体 中 的 内 容 。 
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或 者 添加 && ,表示 两 个 条 件 必 须 同时 满足 ,才能 执行 方法 体 中 的 内 容 。 这 里 使 用 | 后面 
加 上 验证 条 件 , 输 入 的 长 度 value. length < 5, 表 示 如 果 内 容 太 短 也 会 验证 失败 ,这 就 是 想 给 
title 加 的 验证 。 代 码 如 下 : 


Wy epee 03/1ib/pages/create_news. dart 


if(value. trim(). length == 0 || value. length< 5){ // 条 件 判断 
return ' 资 讯 标题 不 能 为 空 ,而且 不 能 少 于 5 个 字 '; // 返回 提示 

} 
return null; // 通过 验证 


在 资讯 分 数 这 里 ,需要 输入 的 是 数字 ,我 们 可 以 添加 这 样 一 个 正则 表达 式 。 代 码 如 下 : 


// eee 09 - 03/1ib/pages/create_news. dart 


validator: (String value) { // 资讯 分 数 验 证 
if (value. isEmpty | | // 不 能 为 空 而 且 必 须 是 数字 
!RegExp(r'"(?:[1-9]\d* |0)?(?:\.\d+ )?$ ').hasMatch(value)) { 
return ' 不 能 为 空 '; 
} 
}, 


如 果 有 其 他 编程 语言 的 背景 ,会 知道 正则 表达 式 是 什么 。 正 则 表达 式 会 验证 输入 的 内 
容 是 否 符合 某 个 模式 。 我 们 通过 ReqExp() 创 建 一 个 正则 表达 式 , 然 后 传人 了 一 个 正则 表 
达 式 内 容 ,注意 前 面 需要 加 一 个 r, 表 达 式 中 的 内 容 表示 ,当前 文本 框 输入 的 内 容 必须 是 一 
个 数字 。 表 达 式 后 面 需要 加 上 hasMatch(value) ,表示 当前 文本 框 中 的 值 是 否 满足 这 个 模 
式 。 这 样 我 们 就 可 以 验证 Form 表单 中 的 文本 输入 了 。 


9.4 关闭 设备 键盘 


表单 Form 加 了 验证 ,但 是 如 果 单 击 如 图 9. 2 所 示 的 方 框 区 域 ,不 能 关闭 下 面 的 软 
键盘 。 

我 们 最 好 能 控制 这 个 软 键盘 ,怎样 实现 呢 ? 8. 15 节 我 们 学 习 了 一 个 很 有 用 的 小 部 件 
GestureDetector, 把 GestureDetector 加 在 Container 的 最 外 层 , 这 样 就 把 Form 也 包含 在 内 
了 。 代 码 如 下 : 


1 nn 09 - 04/1ib/pages/create_news. dart 


return Scaffold( // 新 建 资讯 页 面 
body: GestureDetector( // 添加 GestureDetector 小 部 件 
child: Container( 
width: targetWidth, // Container 的 宽度 
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图 9.2 无 法 关闭 设备 键盘 


margin: EdgeInsets.all(10), // Container 的 外 边 距 
child: Form( // 表单 小 部 件 


在 GestureDetector 中 可 以 添加 单 击 事件 onTap ,然后 加 一 个 方法 , 当 单 击 的 时 候 调 用 
这 个 方法 ,添加 的 单 击 事件 会 被 Flutter 优先 考虑 。 这 里 使 用 一 个 特别 的 类 FocusScope, 它 
需要 context 参数 ,然后 调用 requestFocus () 方 法 ,requestFocus () 方 法 需要 传人 一 个 
FocusNode() 。 代 码 如 下 : 


// Chapter09/09 - 04/1ib/pages/create news. dart 


body: GestureDetector( 


onTap: (){ // 单 击 事件 
FocusScope. of (context). requestFocus(FocusNode( ) ) ; // 获取 焦点 


}, 


文本 框 都 有 一 个 附加 的 FocusNode 对 象 ,如 果 单 击 文 本 框 会 被 自动 调用 ,文本 框 中 的 
FocusNode 对 象 是 由 Flutter 管理 的 。 如 果 从 文本 框 的 焦点 中 跳出 ,只 需要 传 一 个 空 的 
FocusNode 就 可 以 ,所 以 这 里 传人 一 个 空 的 FocusNode, 保 存 并 重启 ,来 到 创建 页 面 ,如 果 此 
时 单 击 空白 处 , 软 键盘 就 消失 了 。 
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9.5 提交 表单 数据 


在 创建 资讯 页 面 中 ,我 们 用 setState() 方 法 给 属性 赋值 。 因 为 这 里 不 需要 重新 加 载 页 
面 ,把 setState() 去 掉 , 只 需 文本 框 中 的 值 赋值 给 属性 ,表示 这 些 数据 会 被 更 新 ,不 需要 调用 
buildO 〇 方法 重新 构建 页 面 。 代 码 如 下 : 


onSaved: (String value) {_title = value;}, // 给 属性 赋值 


我 们 不 需要 在 表单 上 重新 泻 染 ,只 需 保 存 数据 就 可 以 。 没 有 必要 再 调用 setState() 方 
法 ,因为 我 们 只 对 这 里 的 值 感 兴趣 ,而 这 些 值 的 变化 不 需要 重新 构建 小 部 件 。 
可 以 在 创建 资讯 页 面 create_news. dart 创建 一 个 新 的 属性 ,类 型 是 Map < String， 
dymanic > ,命名 为 _formdata 一 {}) ,在 大 括号 中 可 以 初始 化 一 些 key 和 值 ,代码 如 下 : 
// Chapter09/09 - 05/1ib/pages/create_news. dart 
final Map < String, dynamic > _formData // 表单 数据 
= {'title':null, 'description':null, 'score':null}; 
这 样 就 可 以 通过 Map 管理 表单 中 的 数据 ,然后 通过 _formData['titile'] 二 value 给 资讯 
标题 title 赋值 ,可 以 用 同样 的 方式 给 资讯 描述 和 资讯 分 数 赋值 。 最 后 在 addNews() 方 法 中 
可 以 直接 把 _formdata 传 过 去 。 


9.6 把 表单 数据 保存 到 列表 


在 我 的 资讯 页 面 my_news. dart 现在 没有 任何 内 容 , 如 图 9. 3 所 示 。 

可 以 把 创建 的 资讯 news 作为 列表 显示 在 这 个 页 面 ,并 提供 编辑 功能 。 单 击 列表 中 的 
“编辑 ”按钮 后 ,把 news 中 的 信息 加 载 到 创建 资讯 的 表单 里 ,然后 在 单 击 “ 创 建 " 按 钮 的 时 
候 ,不 是 创建 一 个 news, 而 是 更 新 这 条 资讯 news。 

当 创 建 一 条 资讯 news 的 时 候 , 在 main. dart 文件 中 ,已 经 把 这 个 news 添加 到 news 列 
表 中 了 ,然后 这 个 news 列表 向 下 传递 到 资讯 列表 页 面 中 ,并 显示 资讯 列表 。 使 用 同样 的 方 
法 可 以 把 这 组 news 传递 到 我 的 资讯 页 面 MyNewsPage 中 ,所 以 在 MyNewsPage 页 面 中 需 
要 添加 接收 的 参数 ,然后 添加 一 个 属性 ,类 型 是 List < Map < String,dynamic >>, 在 构造 器 
中 把 参数 传 进去 。 代 码 如 下 : 


// Chapter09/09 - 06/1ib/pages/my_news. dart 


class MYNewsPage extends StatelessWidget { // 我 的 资讯 页 面 
final List< Map < String, dynamic >> news; // 资讯 列表 属性 
MyNewsPage( this. news); // 构造 器 赋值 
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图 9.3 我 的 资讯 页 面 


在 资讯 管理 页 面 ManageNews 中 ,也 需要 添加 List < Map < String, dynamic > > news 
属性 ,构造 器 ,然后 从 main. dart 中 向 下 传递 资讯 数组 news。 

在 我 的 资讯 页 面 中 ,返回 一 个 ListView ,调用 builder() 方 法 构建 列表 ,builder() 需 要 传 
递 两 个 参数 ,代码 如 下 : 


// Chapter09/09 - 06/1ib/pages/my_news. dart 


return Scaffold( // 我 的 资讯 页 面 
body: ListView. builder( // 通过 builder 构建 列表 
itemBuilder: (BuildContextcontext, int index){ 


}, 
itemCount : news. length, // 列表 的 长 度 
), 
); 


使 用 ListTile 创建 资讯 记录 , ListTile 可 以 让 列表 显示 得 更 美观 , ListTile 有 个 参数 
leading, 它 的 值 可 以 传递 图 片 ,例如 Image. asset(newsLindexjL'image'])。 我 们 还 可 以 设置 
参数 title:news[Lindexj][L'title 中 ,代码 如 下 : 


// Chapter09/09 - 06/1ib/pages/my_news. dart 
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itemBuilder: (BuildContext context, int index) { // builder 构建 
return ListTile( 
leading: Image.asset(news[ index]['image'])， // 资讯 的 图 片 
title: Text(news[ index][ 'title']), // 资讯 的 标题 


); 


保存 并 重启 ,创建 一 条 资讯 后 ,我 的 资讯 页 面 如 图 9. 4 所 示 。 


图 9.4 我 的 资讯 页 面 


在 ListTile 中 添加 参数 trailing, 表示 这 行 资讯 记录 后 面 的 显示 内 容 。 可 以 使 用 
IconButton 小 部 件 ,然后 添加 单 击 事件 ,代码 如 下 : 


// Chapter09/09 - 06/1ib/pages/my_news. dart 


title: Text(news[ index]['title'])， // 记录 中 的 资讯 标题 


trailing: IconButton( 
icon: Icon(Icons. edit), // 编辑 资讯 的 图 标 按钮 


onPressed: () {}, 
), 


单 击 编辑 图 标 后 需要 加 载 到 一 个 编辑 资讯 页 面 ,下 一 节 我 们 来 实现 。 


152 十 | Flutter 实 战 指南 


9.7 重用 创建 资讯 页 面 


考虑 到 重用 性 ,我 们 把 文件 名 create_news. dart 改 成 edit_news. dart, 表 示 这 里 既 可 以 
创建 一 个 新 的 资讯 news, 也 可 以 编辑 一 个 已 经 存在 的 资讯 news。 在 edit_news. dart 中 , 需 
要 把 类 名 改 成 EditrNewsPage, 这 样 就 完成 了 创建 资讯 页 面 的 重 命名 。 在 使 用 这 个 页 面 的 地 
方 也 需要 修改 ,引用 也 需要 修改 。 

在 我 的 资讯 my_news. dart 页 面 中 , 单 击 ListTile 中 的 图 标 后 需要 导航 到 编辑 资讯 页 
面 edit_news. dart。 可 以 使 用 Navigator 导航 ,这 里 需要 传人 一 些 信 息 到 编辑 资讯 
EditNewsPage 页 面 。 可 以 使 用 导航 路 径 的 方式 跳 转 页 面 ,代码 如 下 : 


// Chapter09/09 - 07/1ib/pages/my_news. dart 


onPressed: () { // 我 的 资讯 页 面 单 击 图 标 按钮 事件 


Navigator. of (context). push( // 跳 转 到 编辑 资讯 页 面 
MaterialPageRoute( 


builder: (BuildContextcontext){ 
return EditNewsPage(news[ index]); 
} 


这 样 就 可 以 使 用 EditNewsPage 页 面 的 构造 器 传递 需要 编辑 的 资讯 news, 所 以 可 以 传 
入 news[index]。 

在 EditNewsPage 页 面 中 现在 没有 接收 这 个 参数 ,需要 新 建 一 个 Map < String,dynamic > 
news, 并 把 这 个 属性 绑 定 到 构造 器 中 。 在 构造 方法 中 有 一 些 参 数 是 在 编辑 资讯 时 使 用 的 , 另 
一 些 是 在 创建 资讯 时 使 用 的 ,所 以 需要 在 构造 器 中 把 这 些 参数 用 大 括号 括 起 来 表示 是 可 选 
的 ,然后 在 EditNewsPage 中 再 添加 一 个 方法 属性 updateNews ,并且 添加 到 构造 器 中 。 代 
码 如 下 : 


// Chapter09/09 - 07/1ib/pages/edit_news. dart 


class EditNewsPageextends StatefulWidget { // 编辑 资讯 页 面 


final Map < String, dynamic > news; // 被 编辑 的 资讯 

final Function addNews; // 创建 资讯 方法 

final Function updateNews; // 更 新 资讯 方法 
EditNewsPage( {this. addNews, 


this. news, this. updateNews} ); // 构造 器 


下 一 节 看 看 怎样 使 用 更 新 资讯 的 方法 。 
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9.8 表单 设置 初始 值 


在 我 的 资讯 页 面 中 传递 的 资讯 news 需要 填充 到 编辑 资讯 页 面 的 表单 中 ,可 以 使 用 
TextFormField 的 参数 initialValue 实现 。initialValue 表示 初始 化 的 值 , 值 的 类 型 是 
String。 代 码 如 下 : 


// Chapter09/09 - 08/1ib/pages/edit_news. dart 


Widget buildScoreTextField() { // 编辑 资讯 页 面 构建 分 数 的 方法 


return TextFormField( // 分 数 文本 框 


initialValue: widget. news[ 'score'].toString()， // 初始 化 值 


如 果 资 讯 news 没有 被 初始 化 ,例如 使 用 的 是 创建 页 面 ,那么 资讯 news 就 为 空 ,这 样 使 
用 将 报错 ,因为 在 类 中 我 们 没有 初始 化 资讯 news 的 值 ,所 以 需要 做 个 判断 ,代码 如 下 : 


// 非 空 判断 


initialValue:widget. news == null?'':widget. news[ 'score']. toString(), 


保存 并 重启 后 ,在 我 的 资讯 页 面 单 击 编辑 图 标 ,如 图 8. 5 所 示 。 


图 9.5 编辑 资讯 页 面 
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此 时 页 面 没有 导航 栏 ,那么 怎样 解决 呢 ? 当前 我 们 需要 显示 编辑 页 面 而 不 是 创建 页 面 ， 
创建 页 面 可 以 包含 在 Tab 标签 页 中 ,编辑 页 面 应 该 显示 导航 栏 。 当 编辑 资讯 页 面 
EditNewsPage 获取 一 条 资讯 news 的 时 候 ,EditNewsPage 是 编辑 模式 ,所 以 可 以 通过 这 个 
条 件 来 设置 显示 的 小 部 件 树 。 把 整个 页 面 中 body 的 内 容 放 入 到 小 部 件 pageContent 中 , 代 
码 如 下 : 


// chapter09/09 - 08/1ib/pages/edit_news. dart 


@override 
Widget build(BuildContext context) { // 编辑 资讯 的 baild() 方 法 
Widget pageContent = GestureDetector( // 页 面 中 body 的 小 部 件 


然后 在 build() 方 法 的 return 后 面 判 断 news 是 否 为 空 , 一 种 情况 是 如 果 为 空 则 创建 页 
面 直接 把 内 容 返 回 就 可 以 了 ; 另 一 种 情况 是 编辑 页 面 ,需要 添加 导航 栏 小 部 件 。 代 码 如 下 : 


// Chapter09/09 - 08/1ib/pages/edit_ news. dart 


return widget. news == null // 判断 传人 的 news 是 否 为 空 
? Scaffold(body: pageContent) // 为 空 时 返回 创建 页 面 没 有 导航 栏 
: Scaffold( // 不 为 空 时 返回 有 导航 栏 的 页 面 


appBar: AppBar( 
title: Text( ' 编 辑 资讯 ')， 
), 
body: pageContent); 


使 用 同样 的 initialValue 方式 ,把 资讯 标题 和 资讯 描述 也 添加 上 初始 化 值 。 现 在 没有 更 
新 资讯 的 方法 ,下 一 节 我 们 添加 更 新 资讯 的 方法 。 


9.9 更 新 数据 


在 main. dart 文件 中 添加 一 个 更 新 资讯 方法 updateNews, 第 一 个 参数 是 int 类 型 ,表示 
news 对 应 的 索引 ,第 二 个 参数 是 Map < String, dynamic > 类 型 代表 更 新 的 news, 然 后 使 用 
setState() 方 法 更 新 数据 ,代码 如 下 : 


// Chapter09/09 - 09/1ib/main. dart 


void updateNews(int index, Map< String, dynamic > news) { 
// 更 新 news 方法 
setState(() { // 重新 泻 染 页 面 
_news[ index] = news; // 把 指定 的 news 更 新 
D); 
} 
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以 上 就 是 更 新 资讯 news 的 全 部 代码 。 这 个 方法 需要 传 给 资讯 管理 ManageNews 页 
面 ,所 以 需要 在 ManageNews 中 添加 方法 属性 updateNews, 然 后 在 构造 中 添加 这 个 方法 。 
使 用 同样 的 方式 ,把 更 新 资讯 的 方法 传 到 我 的 资讯 页 面 MyNewsPage 中 。 在 我 的 资讯 页 面 
MyNewsPage 中 ,把 更 新 资讯 的 方法 updateNews 传人 到 EditNewsPage 页 面 ,代码 如 下 : 

// 在 我 的 资讯 页 面 ,把 更 新 方法 传人 到 编辑 资讯 页 面 

EditNewsPage( news:news[ index], index: index, updateNews: updateNews, ); 

在 编辑 资讯 页 面 EditNewsPage 中 ,需要 判断 哪 种 模式 能 设置 在 提交 表单 的 时 候 调 用 
哪个 方法 ,所 以 在 提交 表单 的 方法 中 验证 news 是 否 为 空 ,代码 如 下 : 


// Chapter09/09 - 09/1ib/pages/edit_news. dart 


if (widget.news == null) { // 如 果 传人 的 news 为 空 


widget. addNews(_formData) ; // 创建 资讯 
}else{ 


widget. updateNews(widget. index,_formData); 
// 否则 编辑 资讯 
} 


编辑 资讯 页 面 EditrNewsPage 需要 再 创建 一 个 整 型 属性 index, 它 也 是 可 选 的 参数 , 需 
要 被 上 一 个 页 面 传 进来 ,所 以 在 我 的 资讯 页 面 MyNewsPage 中 ,把 索引 index 传人 。 代 码 
如 下 : 

EditNewsPage( news:news[ index], index: index); // 传 人 数组 索引 


保存 并 重启 应 用 ,会 发 现 创 建 资讯 和 编辑 资讯 都 可 以 正常 使 用 。 
9.10 总 结 
本 章 我 们 学 习 了 表单 Form ,表单 中 可 以 使 用 文本 框 TextFormField, 它 可 以 添加 很 多 


特殊 的 功能 ,例如 验证 ,初始 化 等 。 我 们 可 以 在 保存 的 时 候 调 用 验证 方法 ,也 可 以 在 用 户 输 
入 的 时 候 验 证 。 表 单 Form 是 Flutter 中 很 重要 的 内 容 。 


高 级 篇 
ppb> 


高 级 篇 内 容 包 括 Flutter 权限 控制 ,使 用 Flutter 动画 效果 ,同时 还 包括 跨 平 台 开 发 
Flutter。 高 级 篇 我 们 还 将 学 习 如 何 发 布 App, 包 括 混合 开发 .异步 编程 .数据 存储 、 网 络 编 
程 。 我 们 将 会 使 用 一 些 工 具 生 成 应 用 的 图 标 , 以 及 使 用 第 三 方 包 调 用 相机 拍照 ,然后 上 传 到 
服务 器 上 。 

为 了 提高 学 习 效 率 , 作 者 提供 在 线 答疑 服务 ,网 址 http://www. x7data. com, 邮箱 
r80hou@hotmail. com, 或 加 QQ 群 : 169055795。 

第 10 章 优化 Flutter 应 用 功能 

优化 应 用 显示 内 容 , 使 应 用 更 加 美观 、 更 加 容易 维护 。 

第 11 章 状态 集中 管理 Scope Model 

全 面 改 进 数 据 和 状态 的 管理 方式 ,使 数据 更 容易 维护 和 扩展 。 

第 12 章 Flutter 与 HTTP 

在 服务 器 上 存储 资讯 数据 .获取 资讯 数据 。App 发 送 HTTP 请 求 获取 数据 。 服 务 器 端 
使 用 RESTful API 提供 后 端 服务 。 

第 13 章 ”权限 认证 

学 习 创 建 用 户 及 管理 用 户 的 权限 数据 ,还 会 学 习 如 何 实现 资讯 的 收藏 功能 。 

第 14 章 访问 相机 和 图 库 

学 习 经 常 使 用 的 相机 和 图 库 ,我 们 可 以 使 用 设备 的 相机 或 者 图 片 库 为 资讯 添加 图 片 ,以 
及 如 何 把 图 片上 传 到 服务 端 ,并 从 服务 端 获 取 上 传 的 图 片 。 

第 15 章 Flutter 动画 效果 

应 用 添加 一 些 动 画 效果 来 提高 用 户 体 验 。 用 户 的 体验 取决 于 提供 的 动画 是 否 有 帮助 ， 
因为 动画 能 帮助 用 户 了 解 哪里 发 生 了 变化 ,从 而 引导 用 户 注意 到 某 些 内 容 。 

第 16 章 优化 应 用 

分 析 并 优化 App。 


第 17 章 使 用 平台 特有 的 小 部 件 

学 习 如 何 根据 不 同 的 平台 显示 不 同 的 小 部 件 , 以 及 根据 不 同 的 平台 使 用 不 同 的 主题 。 

第 18 章 Flutter 跨 平台 交互 

Flutter 允许 我 们 编写 和 使 用 平台 的 原生 代码 ,例如 我 们 可 以 使 用 Java 编写 Android 代 
码 , 或 者 使 用 Object-C 编写 iOS 代码 。 如 果 需 要 编写 非常 高 级 的 应 用 ,就 有 可 能 使 用 原生 
的 特性 。 

第 19 章 发 布 Flutter 应 用 

介绍 如 何 发 布 Flutter 应 用 ,包括 打包 应 用 及 发 布 到 Android 应 用 商店 和 Apple Store 
上 ,还 会 介绍 如 何 设置 应 用 的 图 标 和 闪 屏 。 

第 20 章 总 结 与 回顾 

回顾 本 书 内 容 及 成 为 Flutter 开发 者 后 的 最 佳 实践 。 


优化 Flutter 应 用 功能 


本 章 优化 应 用 显示 内 容 。 这 一 章 内 容 不 多 ,但 是 很 重要 。 通 过 学 习 本 章 内 容 ,我们 可 以 
使 应 用 更 美观 ,更 容易 维护 。 下 面 让 我 们 看 看 这 一 章 有 哪些 内 容 。 


10.1 优化 ListTile 


首先 通过 编辑 资讯 页 面 EditNewsPage 创建 一 条 资讯 news, 如 图 10.1 所 示 。 
在 我 的 资讯 页 面 中 ,显示 如 图 10. 2 所 示 。 


图 10.1 创建 一 条 资讯 图 10.2 我 的 资讯 页 面 
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目前 显示 的 效果 还 可 以 ,但 还 可 以 优化 一 下 。 在 my_news. dart 文件 中 找到 ListTile， 
我 们 用 小 部 件 CircleAvatar 包装 这 个 图 片 ,代码 如 下 : 


// Chapter10/10 - 01/1ib/pages/my_news. dart 


ListTile( // 我 的 资讯 中 资讯 记录 
leading: CircleAvatar( // 圆 角 方式 显示 
backgroundImage: AssetImage(news[ index][ 'image']), 
// 资讯 中 的 图 片 
), 


CircleAvatar 可 以 包装 一 个 图 片 或 者 其 他 任何 内 容 , 它 可 以 以 圆 角 的 方式 显示 ,如 
图 10. 3 所 示 。 


图 10.3 圆 角 显示 图 片 


参数 backgroundImage 不 可 以 直接 赋值 图 片 小 部 件 ,而 是 需要 传人 图 片 的 提供 者 
ImageProvider,ImageProvider 可 以 使 用 AssetImage 创建 。 

ListTitle 还 有 个 参数 subtitle, 我 们 可 以 传人 Text 小 部 件 , 也 可 以 传人 其 他 小 部 件 , 例 
如 Icon 小 部 件 等 。Text 中 可 以 使 用 ' $ {news[Lindexj[L'score']) ', 代 码 如 下 : 


// Chapter10/10 - 01/1ib/pages/my_news. dart 


第 10 章 ”优化 Flutter 应 用 功能 | 161 


title: Text(news[ index][ 'title']), // 资讯 标题 
subtitle:Text('$ {news[ index][ 'score']}'), // 资讯 子 标题 


这 样 资讯 分 数 就 会 显示 在 资讯 标题 的 下 面 ,如 图 10. 4 所 示 ,整体 看 起 来 更 美观 了 。 

我 们 还 可 以 在 每 条 资讯 列表 的 下 面 添加 一 个 水 平 线 小 部 件 Divider, 首 先 把 Column 加 
在 ListTile 外 面 ,Column 中 第 一 个 子 部 件 是 ListTile, 然 后 在 它 的 后 面 添加 另外 一 个 小 部 
件 Divider,Divider 会 画 一 个 水 平 线 ,这 样 看 起 来 就 更 美观 了 ,如 图 10. 5 所 示 。 


图 10.4 使 用 subtitle 图 10.5 每 条 记录 之 间 有 水 平分 隔 线 


10.2 通过 Dismissible 小 部 件 实现 滑动 删除 


在 我 的 资讯 列表 中 不 能 删除 资讯 ,我 们 希望 通过 从 右边 向 左 滑动 某 条 记录 时 能 够 删除 
这 条 记录 ,在 其 他 App 中 会 看 到 这 样 的 效果 。 

Flutter 提供 了 一 个 特别 的 部 件 Dismissible, 把 它 放 到 记录 ListTitle 的 最 外 层 。 代 码 
如 下 : 


// Chapter10/10 - 02/1ib/pages/my_news. dart 
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Dismissible( // 可 删除 的 小 部 件 
child: Column( // 列 小 部 件 
children: < Widget >[ // 列 中 的 子 部 件 
ListTile( // 资讯 记录 


把 鼠标 悬 停 在 Dismissible 上 面 的 时 候 ,提示 需要 一 个 key, 这 个 key 不 是 表单 中 的 
key, 而 是 帮助 Flutter 更 新 列表 的 唯一 标识 。 如 果 要 删除 某 条 记录 ,Flutter 需要 跟踪 这 个 
过 程 ,然后 显示 删除 这 条 记录 后 剩余 的 其 他 记录 。Flutter 需要 知道 我 们 在 哪 条 记录 上 滑 
动 , 然 后 将 这 条 记录 隐藏 ,这 就 是 Dismissible 中 key 的 作用 ,这 个 key 不 是 Form 中 对 应 的 
全 局 变量 。 

在 itemBuilder 的 方法 中 创建 一 个 方法 内 部 的 变量 key, 类 型 是 普通 的 Key,Key 需要 传 
入 一 个 唯一 标识 。 这 里 我 们 使 用 news[Lindexj[L'title"], 以 标题 来 表示 唯一 性 ,后 面 我 们 会 使 
用 资讯 id。 代码 如 下 : 


// Chapter10/10 - 02/1ib/pages/my_news. dart 


ListView. builder( // 资讯 列表 


itemBuilder: 
(BuildContext context, int index) { // 构建 每 条 记录 
Key key = Key(news[index][ 'title'’]); // 创建 Key 对 象 
return Dismissible( // 可 删除 小 部 件 
key:key // 给 Dismissible 的 key 赋值 


这 条 记录 只 是 在 显示 上 被 删除 了 ,实际 上 它 并 没有 从 news 列表 数据 中 被 删除 ,但 可 
以 根据 需要 去 实现 真正 删除 的 功能 。 保 存 后 ,就 可 以 从 右边 向 左 滑动 某 条 记录 了 。 删 掉 
某 条 记录 后 ,再 回 到 我 的 资讯 页 面 时 ,发 现 这 条 数据 并 没有 被 删除 , 它 只 是 从 视图 中 被 删 
除了 。 

给 Dismissible 加 个 背景 色 , 这 样 效 果 会 更 好 ,在 Dismissible 小 部 件 中 有 一 个 参数 
background, 需 要 传人 一 个 小 部 件 , 所 以 可 以 定义 一 个 Container, 代 码 如 下 : 


// Chapter10/10 - 02/1ib/pages/my_news. dart 


Dismissible( // 可 删除 小 部 件 
background: Container(color:Colors. red), // 删除 背景 为 红色 


保存 并 滑动 我 的 资讯 页 面 中 的 某 条 记录 ,显示 效果 如 图 10. 6 所 示 。 
当 滑 动 的 时 候 能 执行 什么 ? 我 们 可 以 监听 这 个 事件 ,下 一 节 实 现 这 个 功能 。 
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图 10.6 删除 资讯 记录 的 效果 


10.3 监听 滑动 手势 删除 数据 及 总 结 


上 一 节 我 们 只 是 从 显示 中 删除 了 记录 ,并 没有 真正 地 删除 列表 数据 ,现在 实现 一 下 真正 
的 删除 功能 。 在 main. dart 文件 中 ,已 经 实现 了 删除 资讯 news 的 方法 .代码 如 下 : 


// Chapter10/10 - 03/1ib/main. dart 


void deleteNews(int index) { // 根据 news 的 索引 删除 
setState(() { 
_news. removeAt ( index); // 删除 索引 index 对 应 的 news 


D; 
} 


首先 把 _deleteNews 传 到 我 的 资讯 MyNewsPage 页 面 中 。 在 MyNewsPage 页 面 创建 
方法 属性 deleteNews, 然 后 通过 构造 器 赋值 ,代码 如 下 : 


// Chapter10/10 - 03/1ib/pages/my_news. dart 
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final Function deleteNews; // 删除 资讯 方法 属性 
MyNewsPage(this. news, this. updateNews, // 构造 器 赋值 
this. deleteNews); 


我 们 需要 把 这 个 方法 跟 滑 动 删除 事件 关联 上 ,在 这 个 删除 方法 中 只 需要 传人 一 个 news 
数组 的 索引 ,在 Dismissible 小 部 件 中 添加 一 个 参数 onDismissed, 当 滑 动 删除 时 这 个 参数 对 
应 的 方法 会 被 调用 。 代 码 如 下 : 


// Chapter10/10 - 03/1ib/pages/my_news. dart 


return Dismissible( // 可 删除 小 部 件 
onDismissed: (){}, // 滑动 删除 时 调用 的 方法 


方法 中 需要 传人 DismissDirection 类 型 的 参数 ,通过 DismissDirection 可 以 监听 滑动 的 
方向 ,例如 从 右边 向 左 滑动 时 调用 哪个 方法 或 者 从 左边 向 右 滑 动 时 执行 哪个 方法 。 我 们 这 
里 只 监听 从 右 到 左 , 在 方法 中 调用 删除 方法 deleteNews() ,并 把 news 的 索引 传人 ,代码 
如 下 : 


// Chapter10/10 - 03/1ib/pages/my_news. dart 


onDismissed: (DismissDirection direction){ // 监听 滑动 方向 


if(direction == DismissDirection. endToStart){ // 从 右 向 左 滑动 时 
deleteNews( index) ; // 删除 这 条 记录 


} 
} 


这 样 就 可 以 在 数据 中 也 删除 这 条 记录 了 。 

本 章 我 们 学 习 了 使 用 Dismissible 实现 删除 功能 ,在 我 的 资讯 页 面 中 ,我 们 把 资讯 记录 
中 的 “编辑 按钮 封装 到 一 个 方法 _buildEditButton() 中 ,这 个 方法 需要 传人 context 和 资讯 
记录 的 索引 ,然后 在 ListTile 中 调用 _buildEditButton( ) 方 法 ,代码 如 下 : 


// Chapter10/10 - 03/1ib/pages/my_news. dart 


subtitle: Text('$ {news[ index]['score']}'), // 资讯 子 标题 
trailing: _buildEditButton(context, index), // 构建 编辑 按钮 


使 用 同样 的 方式 优化 编辑 页 面 ,把 页 面 内 容 pageContent 放 到 _buildPageContent() 方 
法 里 。 这 种 方法 优化 代码 使 项 目的 代码 更 易 读 ,下 一 章 我 们 优化 传递 数据 的 方式 。 


状态 集中 管理 Scope Model 


第 10 章 我 们 优化 了 App 的 页 面 ,本 章 优化 一 下 App 中 管理 数据 的 方式 。 当 前 App 使 
用 传递 参数 的 方式 传递 数据 ,这 种 方式 需要 穿越 多 层 小 部 件 来 传递 数据 。 本 章 我 们 将 全 面 
改进 数据 和 状态 的 管理 方式 ,使 数据 更 容易 维护 和 扩展 。 


11.1 优化 Flutter 状态 管理 


在 main. dart 文件 中 ,这 里 目前 管理 整个 应 用 的 状态 数据 ,main. dart 中 包含 主要 的 资 
讯 数组 数据 ,代码 如 下 : 

List <Map< String, dynamic >> news = []; // 资讯 数组 数据 

main. dart 中 还 包含 添加 、 更 新 、 删 除 资讯 数据 的 方法 ,我 们 可 以 把 方法 的 引用 和 资讯 
数组 数据 向 下 级 小 部 件 传递 。 使 用 这 种 方式 没 问 题 , 但 不 是 最 好 的 方式 。 随 着 App 功能 的 
增多 ,可 能 会 有 更 复杂 的 小 部 件 树 ,使 用 这 种 方式 需要 穿越 更 多 层 的 小 部 件 来 传递 数据 。 

资讯 管理 页 面 ManageNews 需要 接收 所 有 的 方法 引用 和 news 数据 ,代码 如 下 : 


// Chapter10/10 - 03/1ib/pages/manage_news. dart 


class ManageNews extends StatelessWidget { // 资讯 管理 页 面 
final Function addNews; // 添加 资讯 方法 
final Function deleteNews; // 删除 资讯 方法 
final Function updateNews; // 更 新 资讯 方法 
final List < Map < String, dynamic >> news; // 资讯 数组 数据 

ManageNews( this. addNews, // 构造 器 赋值 


this. deleteNews, 
this. news, 
this. updateNews); 


但 ManageNews 并 没有 使 用 这 些 方 法 和 属性 ,而 是 把 方法 和 属性 传递 到 它 的 子 部 件 
Tab 中 。 代 码 如 下 : 
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// chapter10/10 - 03/1ib/pages/manage_news. dart 


body: TabBarView( // 标签 页 内 容 


children: < Widget >[ // 标签 页 子 部 件 
EditNewsPage(addNews:addNews), // 编辑 资讯 页 面 
MyNewsPage( news, updateNews, deleteNews) // 我 的 资讯 页 面 


), 


我 的 资讯 页 面 MyNewsPage 也 没有 使 用 所 有 的 方法 ,MyNewsPage 把 更 新 资讯 的 方法 
引用 传 到 了 EditNewsPage 编辑 资讯 页 面 。 我 们 使 用 了 一 个 很 复杂 的 链条 来 传递 数据 ,这 
是 要 在 本 章 中 解决 的 问题 。 

现在 App 使 用 Map 保存 着 资讯 news 的 数据 ,而 且 Map 中 没有 资讯 id, 我 们 没有 定义 
自己 的 类 型 ,所 以 我 们 需要 定义 一 下 资讯 的 类 型 ,通过 自 定义 的 类 型 实例 化 资讯 news。 


11.2 自 定 义 实 体 类 


定义 实体 类 需要 使 用 class 关键 字 ,我 们 把 自 定义 的 实体 类 放 在 新 的 目录 中 。 在 lib 目 
录 下 ,新建 目 录 models。 自 定义 的 类 可 以 通过 实例 化 管理 数据 。 

在 models 目录 中 ,新 建 news_model. dart 文件 ,在 news_model. dart 文件 中 创建 类 
NewsModel。 代 码 如 下 : 


class NewsModel{ // 自 定义 资讯 类 
} 


我 们 可 以 在 类 中 添加 一 些 属性 ,例如 资讯 Map 中 包含 的 属性 ,我 们 在 NewsModel 类 中 
创建 这 些 属性 ,代码 如 下 : 


// Chapter11/11 - 02/lib/models/news_model. dart 


class NewsModel{ // 资讯 类 


final String title; // 资讯 标题 

final String description; // 资讯 描述 

final double score; // 资讯 分 数 

final String image; // 资讯 图 片 
NewsModel( {this. title, // 命名 参数 构造 器 


this. description, 
this. score, 
this. image}); 
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final 表示 使 用 NewsModel 对 象 过 程 中 不 编辑 它 , 而 是 使 用 新 的 NewsModel 对 象 替换 
旧 的 NewsModel 对 象 ,NewsModel 类 中 新 创建 了 4 个 属性 ,同时 通过 命名 参数 的 方式 创建 
了 NewsModel 的 构造 器 。 

如 果 命名 参数 中 的 参数 是 必 填 的 ,需要 在 参数 前 加 注解 required, 代 码 如 下 所 示 : 


@required this. title // 资 讯 标题 必 填 
@required 是 Flutter 中 material 包 附 带 的 ,所 以 需要 引入 material 包 。 命 名 参数 能 让 
使 用 者 更 灵活 地 传递 参数 。 


现在 我 们 就 可 以 使 用 NewsModel 类 了 ,在 main. dart 文件 中 ,首先 需要 引入 
NewsModel 类 对 应 的 文件 ,然后 把 资讯 数组 数 中 的 泛 型 数据 定义 为 NewsModel 类 型 。 代 
码 如 下 : 


// Chapter11/11 - 02/1ib/main. dart 


class _MYappState extends State < Myapp> { // Myapp 对 应 的 状态 
List < NewsModel > news = []; // NewsModel 类 型 数组 


需要 修改 很 多 地 方 的 代码 ,例如 添加 资讯 的 方法 、 更 新 资讯 的 方法 等 。 现 在 资讯 数组 
news 中 保存 的 是 NewsModel 类 型 的 数据 ,所 以 可 以 直接 使 用 点 加 属性 来 访问 数据 。 


title: _news[ index]. title, // 访 问 对 象 中 的 属性 


现在 我 们 使 用 了 自 定义 的 类 型 NewsModel 保存 着 资讯 的 数据 ,但 是 应 用 中 还 是 到 处 
传递 状态 数据 ,下 一 节 我 们 解决 这 个 问题 。 


11.3 创建 Scoped Model 


在 main. dart 中 四 处 传递 数据 存在 两 个 问题 ,第 一 个 问题 我 们 需要 把 数据 传递 给 小 部 
件 ,小 部 件 需 要 在 构造 器 中 接收 这 个 数据 ; 第 二 个 问题 是 main. dart 文件 将 变 得 腾 肿 ,目前 
这 里 只 有 一 组 数据 ,但 是 如 果 在 main. dart 中 再 管理 用 户 数 据 或 者 其 他 数据 , 根 小 部 件 就 会 
变 得 越 来 越 大 ,这 将 使 管理 状态 变 得 非常 复杂 。 

如 果 从 事 过 Web 开发 ,可 能 听 说 过 一 种 解决 方案 Redux( 用 一 个 单独 的 常量 状态 树 保 
存 整 个 应 用 的 状态 )。 在 应 用 中 创建 中 央 状 态 , 让 状态 数据 与 小 部 件 分 离 ,然后 再 将 状态 数 
据 注 入 到 不 同 的 小 部 件 中 ,使 用 这 种 方式 就 不 必 通 过 构造 器 传递 数据 了 。 我 们 只 需要 从 小 
部 件 中 访问 需要 的 状态 数据 就 可 以 了 。 这 种 方式 可 以 将 小 部 件 显示 与 管理 状态 数据 分 开 。 
当前 的 App 是 将 显示 和 数据 合并 在 了 一 起 。 

Flutter 中 有 个 第 三 方 包 帮 助 我 们 完成 这 项 工作 ,这 个 第 三 方 包 是 scoped_model。Dart 
语言 允许 使 用 第 三 方 包 ,Flutter 同样 也 支持 第 三 方 包 。 在 浏览 器 中 输入 网 址 https://pub. 
dev/flutter 查询 Flutter 的 第 三 方 包 , 这 个 网 站 提供 大 量 的 第 三 方 包 , 如 图 11.1 所 示 。 
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provide © 
A simple framework for state management in Flutter This package contains classes to allow the passing of data down the widget tree 
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The ed background location-tracking & geofencing module with battery-conscious motion-detection intelligence for IOS and 

Android 
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webkit_inspection_protocol @ 
ools Protocol (previously called the Webkut Inspection Protocol) 

flutter_downloader © 

A plugin for creating and managing download tasks. Supports IOS and Android 

1.2.2°Updated: Sep 19,2019 FLUTTER 

provider @ 

A mixture between dependency injection and state management built with widgets for widget 


0+Updatec: Aug 20 2019 


图 11.1 Flutter 的 第 三 方 包 


scoped_model 可 以 轻松 地 管理 状态 数据 ,官网 上 可 以 看 到 包 的 说 明 ,例如 如 何 安装 、 使 
用 方法 等 ,如 图 11. 2 所 示 。 

把 scoped_model:“1.0.1 复 制 一 下 ,在 IDE 中 编辑 pubspec. yaml, 在 pubspec. yaml 的 
依赖 中 粘贴 scoped_model:“1. 0.1, 保 存 后 ,Visual Studio Code 会 自动 下 载 这 个 包 。 我 们 
还 可 以 在 项 目 所 在 目录 的 终端 中 ,使 用 命令 flutter packages get 加 载 这 个 包 。 

scoped_model 允许 我 们 创建 一 个 中 央 状 态 数 据 , 首 先 在 lib 目录 下 新 建 目录 scoped_ 
models,scoped_models 和 目录 models 的 意义 不 同 , models 中 包含 的 是 自 定义 的 类 型 ， 
scoped_models 中 的 类 用 来 管理 数据 。 

在 目录 scoped_models 中 创建 文件 news_scope_model. dart, 创 建 类 NewsScopeModel, 这 
里 需要 继承 一 个 scoped_model 包 提 供 的 类 Model。 代 码 如 下 : 


// Chapter11/11 - 03/1ib/scoped_models/news_scope_model. dart 
import 'package: scoped model/scoped model. dart'; 
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scoped_model 1.0.1 


Published Nov 29,2018 FLUTTER 


Readme 


Changelog Example Installing 


Use this package as a library 
1. Depend on it 


Add this to your package's pubspec yaml file: 


dependencies: 
scoped_model: ~1.9.1 


2. Install it 


You can install packages from the command line: 


With Flutter 


flutter pub get 


Alternatively your editor might support flutter pub get. Check the docs foryour editorto 


learn more. 
3. Import it 


Now In your Dart code you can use 


import 'package:scoped_modet/scoped_nodet,dart'; 


About 

A Widget that passes a Reactive 
Model to allofits children 
Repository (GitHub) 
View/report issues 


APl reference 


Author 
加 Q Andrew Wilson 
BQ Brian Egan 


Uploaders 

BQ brian@brianegan com 

国 Q fliph@google.com 
icense 

BSD (LICENSE) 


Dependencies 

flutter 

More 

Packages that depend on 


scoped_model 


图 11.2 


class NewsScopeModel extends Model{ 


} 


scoped_model 的 使 用 说 明 


// 继承 Model 


在 main. dart 文件 中 ,把 在 main. dart 中 集中 管理 的 资讯 数组 news、 添 加 资讯 方法 、 更 


新 资讯 方法 、 删 除 资 讯 方 法 剪 切 下 来 ,然后 粘贴 到 NewsScopeModel 中 。 在 
NewsScopeModel 中 不 能 使 用 setState() 方 法 ,因为 NewsScopeModel 不 是 StatefulWidget。 
代码 如 下 : 


// Chapter11/11 - 03/1ib/scoped models/news_scope model. dart 


import 'package:scoped_model/scoped_model. dart'; // 引入 包 

import '../models/news_model. dart'; // 引入 自 定义 类 

class NewsScopeModel extends Model { // 状态 管理 类 
List< NewsModel> news = []; // 资讯 数组 数据 


void addNews(NewsModel news) { 


// 添加 资讯 
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_news.add(news) 

} 

void deleteNews(int index) { // 删除 资讯 
_news. removeRt( index) ; 

void updateNews( int index，NewsModel news) { // 更 新 资讯 
_news[ index] = news; 


方法 前 没有 下 夯 线 表示 方法 可 以 被 外 部 调用 。 现 在 资讯 数组 news 不 能 被 返回 ,需要 
创建 一 个 获取 资讯 数组 的 方法 .方法 的 返回 值 是 List < NewsModel >, 代 码 如 下 : 


List < NewsModel > get newsList{ // 获取 资讯 数组 的 方法 
} 


在 方法 名 newsList 前 面 添加 一 个 get 关键 字 ,表示 我 们 通过 NewsScopeModel 的 对 象 
加 . newslist 就 可 以 访问 属性 了 ,newslist 后 面 不 需要 加 括号 。newsList 方法 是 一 个 没有 参 
数 的 方法 。 使 用 get 关键 字 时 不 可 以 使 用 参数 列表 。 

然后 在 方法 体 中 返回 资讯 数组 news ,代码 如 下 : 


return _news; // 返回 资讯 数组 


这 里 的 _news 是 一 个 引用 类 型 ,意味 着 真实 的 news 值 存储 在 内 存 中 的 一 个 地 址 里 。 
这 里 我 们 希望 返回 _news 的 副本 。 一 个 新 的 _news 而 不 是 现 有 _news。 
List 有 个 from() 方 法 ,可 以 把 当前 的 资讯 数组 数据 传递 给 from() 方 法 ,代码 如 下 : 


// Chapter11/11 - 03/1ib/scoped_models/news_scope_model. dart 


List < NewsModel > get newsList{ // 获取 资讯 数组 数据 
return List. from(_news); // 返回 新 的 _news 对 象 
} 


from(_news) 表 示 将 _news 复制 到 新 数组 中 ,这 样 就 不 会 返回 指向 同一 个 对 象 的 指针 ， 
而 是 返回 一 个 全 新 的 列表 。 以 这 种 方式 从 外 部 获取 到 资讯 数组 数据 后 , 当 对 获取 的 资讯 数 
组 数据 编辑 时 ,不 会 影响 NewsScopeModel 中 的 真实 数据 ,这 才 是 我 们 想 要 的 。 保 证 在 
NewsScopeModel 中 NewsScopeModel 的 属性 是 私有 的 ,只 能 通过 NewsScopeModel 中 的 
方法 改变 NewsScopeModel 中 属性 的 值 。 不 让 外 部 直接 操作 NewsScopeModel 中 的 属性 ， 
这 样 才 是 对 状态 数据 的 封装 。 

下 一 节 我 们 看 一 下 怎么 使 用 NewsScopeModel。 
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11.4 与 Scoped Model 建立 联系 


首先 把 所 有 页 面 中 传递 的 参数 删除 ,现在 我 们 不 想 使 用 这 种 链条 方式 传递 数据 ,同时 把 
属性 和 构造 器 都 删除 。 

然后 在 News 小 部 件 中 ,把 它 的 属性 和 构造 器 删除 ,让 scoped_model 发 挥 作 用 。 在 
build() 方 法 中 ,需要 返回 一 个 scoped_model 包 提供 的 小 部 件 , 所 以 首先 需要 引入 scoped_model 
包 。 在 build() 方 法 这 里 ,需要 添加 ScopedModelDescendant。ScopedModelDescendant 是 
一 个 特殊 的 小 部 件 , 它 有 一 个 参数 叫 builder,builder 需要 传人 方法 并 接收 3 个 参数 ,把 鼠标 
悬 停 在 builder 上 面 可 以 看 到 3 个 参数 的 类 型 分 别 是 BuildContext、Widget 和 Model。 

第 一 个 参数 和 我 们 之 前 用 到 的 一 样 , 表 示 应 用 的 上 下 文 BuildContext context。 第 二 个 
参数 传人 一 个 小 部 件 ,表示 无 法 获得 Model 数据 的 子 部 件 ,我 们 很 少 使 用 这 个 参数 。 第 三 
个 参数 类 型 是 Model ,表示 当 model 中 的 数据 发 生变 化 时 ,参数 builder 对 应 的 方法 就 会 被 
执行 。 现 在 我 们 还 没有 指定 这 个 model, 我 们 可 以 使 用 泛 型 来 指定 ,例如 这 里 我 们 使 用 的 是 
NewsScopeModel。 代 码 如 下 : 


// Chapter11/11 - 04/1ib/widgets/news/news. dart 


@override 
Widget build(BuildContext context) { // News 小 部 件 中 的 构建 方法 
return ScopedModelDescendant < NewsScopeModel >( // 使 用 ScopeModel 
builder: (BuildContext context, Widget child, NewsScopeModel model) { 
return buildNewsList(); // 返回 资讯 列表 


}, 
); 
} 


builder 方法 会 在 NewsScopeModel 中 的 数据 发 生变 化 时 调用 ,方法 中 我 们 把 资讯 列表 
小 部 件 返回 。 在 builder 方法 中 我 们 可 以 访问 model 中 的 数据 ,因为 model 已 经 作为 一 个 参 
数 传 过 来 了 ,所 以 这 里 可 以 通过 model. newslist 获取 news 的 值 ,然后 在 buildNewsList() 方 法 
中 添加 一 个 参数 List < NewsModel > news。 代 码 如 下 : 


return buildNewsList(model. newsList); // 返回 参数 列表 


在 编辑 资讯 页 面 EditNewsPage 页 面 中 .可 以 使 用 NewsScopeModel 中 的 创建 资讯 方 
法 和 更 新 资讯 方法 。scoped_model 需要 在 build() 方 法 中 访问 我 们 的 NewsScopeModel。 

我 们 把 “创建 ”按钮 放 到 方法 _buildSubmitButton() 中 ,然后 在 _buildSubmitButton() 中 
使 用 scoped_model。 代 码 如 下 : 
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// Chapter11/11 - 04/1ib/pages/edit news. dart 


Widget buildSubmitButton() { // 构建 按钮 的 方法 


return ScopedModelDescendant < NewsScopeModel >( // 使 用 scoped_model 
builder: (BuildContext context, // builder() 方 法 
Widget child, NewsScopeModel model) { 
return RaisedButton( // 返回 按钮 

color: Theme. of(context).accentColor, // 按钮 的 颜色 
textColor: Colors. white, // 按钮 文字 的 颜色 

child: Text( ' 创 建 ')， // 按钮 上 的 文字 
onPressed: (){ // 按钮 的 单 击 事件 


_submitForm(model.addNews, model. updateNews); 
// 使 用 NewsScopeModel 中 的 新 增 和 更 新 方法 


在 提交 方法 _submitForm 中 传人 参数 方法 类 型 的 参数 ,代码 如 下 : 


// 编辑 资讯 的 提交 表单 方法 
void _submitForm(Function addNews, FunctionupdateNews){ 


现在 项 目 中 并 没有 创建 NewsScopeModel 实例 ,我 们 只 是 在 参数 中 使 用 了 ,所 以 需要 创 
建 一 个 实例 ,然后 提供 给 应 用 中 的 小 部 件 。 应 用 中 有 很 多 地 方 需要 使 用 同一 个 实例 


NewsScopeModel。 


我 们 已 经 定义 了 NewsScopeModel 类 ,现在 需要 在 main. dart 中 包装 MaterialApp, 代 


码 如 下 所 示 : 


// Chapter11/11 - 04/1ib/main. dart 


@override 
Widget build(BuildContext context) { // 构建 方法 
return ScopedModel < NewsScopeModel >( // 返回 ScopedModel 
model: NewsScopeModel(), // 创建 NewsScopeModel 实例 
child: MaterialApp( // 根 小 部 件 


在 App 开始 构建 的 时 候 ,我 们 创建 了 一 个 NewsScopeModel 实例 ,并 且 把 这 个 实例 传 
递 给 MaterialApp 及 其 所 有 的 子 部 件 ,而 不 是 使 用 构造 器 的 方式 向 下 传递 ,这样 我 们 就 不 需 


要 使 用 参数 向 下 传递 数据 了 。 
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11.5 使 用 Scoped Model 编辑 和 删除 


在 编辑 页 面 EditNewsPage 中 ,我 们 已 经 使 用 了 scoped_model。 现 在 修改 更 新 资讯 
news 方法 。 在 NewsScopeModel 中 没有 定义 选中 资讯 news 的 索引 。 在 NewsScopeModel 
中 需要 一 个 整 型 数据 ,表示 选中 资讯 news 的 索引 ,代码 如 下 : 


int_selectedIndex; // 资 讯 数 组 中 选中 的 资讯 索引 


我 们 需要 添加 一 些 方法 来 设置 _selectedIndex 的 值 ,添加 设置 选中 资讯 索引 的 方法 , 代 
码 如 下 : 


// Chapter11/11 - 05/1ib/scoped_models/news_scope_model. dart 


void selectNews( int index){ // 设置 选中 资讯 的 方法 
_selectedIndex = index; // 赋值 选中 的 资讯 索引 
} 


这 样 我 们 就 知道 选择 了 哪 条 资讯 记录 ,在 更 新 和 删除 方法 中 就 不 需要 传人 资讯 数组 的 
索引 index 了 ,而 是 直接 使 用 selectedIndex。 代 码 如 下 : 


// Chapter11/11 - 05/1ib/scoped_models/news_scope_model. dart 


void deleteNews() { // 删除 资讯 的 方法 


_news. removeAt(_selectedIndex); // 删除 选中 的 记录 
} 
void updateNews(NewsModel news) { // 更 新 资讯 的 方法 
_news[_selectedIndex] = news; // 更 新 选中 的 记录 


} 


在 我 的 资讯 页 面 MyNewsPage 中 ,去 掉 传 人 编辑 资讯 页 面 的 参数 ,然后 使 用 scoped_ 
model 方式 实现 。ScopedModelDescendant 必须 在 小 部 件 的 外 面 使 用 ,例如 把 
ScopedModelDescendant 包装 在 Scaffold 页 面 外 面 ,然后 在 跳 转 到 编辑 资讯 之 前 调用 
NewsScopeModel 中 的 selectrNews() 方 法 选中 一 条 记录 。 代 码 如 下 : 


// Chapter11/11 - 05/1ib/pages/my_news. dart 


Navigator. of (context). push( // 导航 到 编辑 资讯 页 面 


MaterialPageRoute(builder: (BuildContext context) { 
model. selectNews( index); // 设置 选中 的 资讯 索引 


return EditNewsPage( ); // 编辑 资讯 页 面 
D, 
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); 


在 我 的 资讯 页 面 中 ,删除 资讯 这 里 需要 选中 资讯 记录 ,然后 删除 记录 ,代码 如 下 : 


// Chapter11/11 - 05/1ib/pages/my_news. dart 


if (direction == DismissDirection.endToStart) { // 滑动 方向 
model. selectNews( index); // 选中 记录 
model. deleteNews(); // 删除 记录 


} 


在 编辑 资讯 页 面 EditrNewsPage 中 ,我 们 可 以 通过 NewsScopeModel 中 _selectedIndex 
的 值 判断 当前 是 新 建 模式 还 是 编辑 模式 。 首 先 把 编辑 资讯 页 面 中 的 表单 Form 小 部 件 用 
ScopedModelDescendant 包装 起 来 ,代码 如 下 : 

// Chapter11/11 - 05/1ib/pages/edit_news. dart 


child: ScopedModelDescendant( // 使 用 scoped_model 
builder: (BuildContext context, // builder() 方 法 
Widget child, NewsScopeModel model) { 
return Form( // 表单 小 部 件 
key: _formkey, 


在 NewsScopeModel 中 只 有 一 个 设置 方法 ,这 意味 着 当 我 们 新 增 、 更 新 、 删 除 资讯 之 后 
需要 把 _selectedIndex 设置 为 空 。 代 码 如 下 : 


// Chapter11/11 - 05/1ib/scoped_models/news_scope_model. dart 


void addNews( NewsModel news) { // 添加 资讯 的 方法 
_news. add(news); // 添加 资讯 
_selectedIndex = null; // 重 置 选中 索引 
void deleteNews() { // 删除 资讯 的 方法 
_news. removeAt(_selectedIndex); // 删除 选中 的 记录 
_selectedIndex = null; // 重 置 选 中 的 索引 
void updateNews(NewsModel news) { // 更 新 资讯 的 方法 
_news[_selectedIndex] = news; // 更 新 选中 记录 
_selectedIndex = null; // 重 置 选中 的 索引 


然后 我 们 需要 给 _selectedIndex 添加 一 个 获取 数据 的 方法 ,代码 如 下 : 


int get selectedIndex{ return _selectNews;} // 获 取 选 中 的 索引 
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在 编辑 资讯 页 面 中 ,如 果 model. selectedIndex 等 于 null 表示 没有 选中 某 一 个 资讯 
news, 需 要 在 builder 方法 中 调用 创建 资讯 的 方法 。 


// Chapter11/11 - 05/1ib/pages/edit news. dart 


if (model. selectedIndex == null) { // 如 果 没 有 选中 资讯 


model.addNews(_formData); // 调用 创建 资讯 方法 
} elsel{ 
model. updateNews( // 调用 更 新 资讯 方法 


model. newsList[model. selectedIndex]); 
} 


在 NewsScopeModel 类 中 ,我 们 可 以 通过 _selectedIndex 和 _news 获得 选中 的 资讯 的 
news, 所 以 这 里 需要 创建 一 个 获取 选中 资讯 记录 的 方法 ,代码 如 下 : 

// Chapter11/11 - 05/1ib/scoped_models/news_scope_model. dart 

NewsModel get selectedNews{ // 获取 选中 的 资讯 记录 


return _news[_selectedIndex]; // 选中 的 资讯 记录 
4 


在 编辑 资讯 页 面 EditNewsPage 中 , 我们 可 以 通过 NewsScopeModel 中 的 
selectedNews 方法 获取 选中 的 news, 然 后 进行 初始 化 。 代 码 如 下 : 


// Chapter11/11 - 05/1ib/pages/edit_news. dart 


Widget buildDescTextField(NewsScopeModel model) { // 构建 资讯 描述 


return TextFormField( // 描述 文本 框 
initialValue: model. selectedNews == null // 描述 初始 化 


? '' :model. selectedNews. description, 


在 NewsScopeModel 中 的 selectedNews() 方 法 需要 添加 一 个 让 判断 语句 ,表示 如 果 没 
有 选中 资讯 记录 ,返回 null, 然 后 在 提交 表单 时 调用 addNews() 方 法 。 代 码 如 下 : 


// Chapter11/11 - 05/1ib/scoped_models/news_scope_model. dart 


NewsModel get selectedNews{ // 获取 选中 资讯 记录 


if(_selectedIndex == null){ // 如 果 选 中 的 索引 为 空 
return null; // 返回 nul1 

} 

return _news[_selectedIndex]; // 返回 索引 对 应 的 资讯 


} 


这 样 我 们 就 可 以 通过 scoped_model 的 方式 创建 资讯 和 编辑 资讯 了 。 
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11.6 收藏 功能 


当前 资讯 列表 中 包含 了 收藏 按钮 ,如 图 11. 3 所 示 。 


资讯 标题 


图 11.3 资讯 列表 的 收藏 按钮 


下 面 让 我 们 实现 一 下 资讯 的 收藏 功能 。 首 先 在 NewsModel 类 中 ,添加 一 个 属性 ,类 型 
是 bool 类 型 ,属性 名 是 isFavorite, 表 示 用 户 是 否 收藏 当前 的 资讯 news。 代 码 如 下 : 


// Chapter11/11 - 06/1ib/models/news_model. dart 


class NewsModel { // 资讯 实体 类 

final String title; // 资讯 标题 

final String description; // 资讯 描述 

final double score; // 资讯 分 数 

final String image; // 资讯 图 片 

final bool isFavorite; // 是 否 收藏 
NewsModel( // 资讯 实体 类 构造 器 


{@required this. title, 
@required this. description, 
@required this. score, 
@required this. image, 

this. isFavorite = false}); 


} 
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默认 值 为 false, 表 示 默 认 情 况 是 没有 收藏 的 。 我 们 需要 通过 scoped_model 控制 所 有 
的 状 体 数据 ,所 以 在 NewsScopeModel 类 中 添加 方法 toggleFavorite() ,代码 如 下 : 


// Chapter11/11 - 06/1ib/scoped models/news_scope model. dart 


void toggleFavorite() { 


bool currentValue = selectedNews. isFavorite; 


bool newValue = !currentValue; 
NewsModel news = NewsModel( 
title: selectedNews. title, 


description: selectedNews. description, 


score: selectedNews. score, 
image: selectedNews. image, 
isFavorite: newValue); 
_news[_selectedIndex] = news; 
_selectedIndex = null; 


// 收藏 功能 

// 选中 资讯 的 收藏 状态 
// 切换 收藏 状态 
// 新 建 资讯 实体 
// 标题 赋值 

// 描述 赋值 

// 分 数 赋值 

// 图 片 赋值 

// 收藏 状态 

// 更 新 选中 资讯 
// 重 置 资讯 索引 


然后 我 们 需要 在 NewsCard 中 使 用 toggleFavorite() 方 法 ,所 以 收藏 按钮 需要 使 用 


scoped_model 包装 一 下 。 代 码 如 下 : 


// Chapter11/11 - 06/1ib/widgets/news/news_card. dart 


ScopedModelDescendant < NewsScopeModel >( 


builder: 


// 使 用 scopded_model 
// builder() 方 法 


(BuildContext context, Widget child, NewsScopeModel model) { 


return IconButton( 
icon: Icon( 
Icons. favorite border, 
size: 20, 
color: Colors. red, 
), 
onPressed: () { 
model. selectNews( index); 
model. toggleFavorite( ); 
}, 
); 
}, 


// 图 标 按钮 

// 图 标 小 部 件 
// 空心 收藏 图 标 
// 图 标 大 小 

// 图 标 颜 色 


// 单 击 事件 
// 选中 当前 记录 
// 切 换 收藏 功能 


在 单 击 收藏 按钮 的 方法 中 ,我 们 首先 设置 了 选中 的 资讯 索引 ,然后 调用 了 
toggleFavorite() 方 法 。 当 前 的 收藏 图 标 是 空心 的 ,我 们 需要 在 单 击 收藏 按钮 时 ,把 空心 的 


收藏 图 标 变 成 实心 的 ,代码 如 下 : 
// 动 态 显示 收藏 按钮 


model. newsList[ index]. isFavorite?Icons. favorite:Icons. favorite border, 
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此 时 点 击 收藏 图 标 后 ,收藏 图 标 没 有 任何 反应 。 如 果 重 新 切换 资讯 列表 页 面 , 我 们 发 现 
收藏 按钮 变 成 实心 的 了 ,如 图 11.4 所 示 。 


11.4 已 收藏 资讯 


下 一 节 我 们 学 习 动 态 显 示 收 藏 状态 。 


11.7 使 用 notifyListeners() 方 法 


上 一 节 我 们 实现 了 收藏 功能 ,但 是 需要 来 回 切 换 页 面 才能 更 新 收藏 的 状态 ,那么 如 何在 
当前 页 面 就 能 生效 呢 ? 当 我 们 在 资讯 列表 中 单 击 收藏 图 标 时 ,在 NewsScopeModel 中 ,需要 
告诉 Flutter 我 们 做 了 一 些 改变 ,让 Flutter 知道 我 们 更 新 了 数据 。 如 果 不 告诉 Flutter 数据 
发 生 了 变化 ,Flutter 不 会 重新 构建 。 

在 NewsScopeModel 的 收藏 方法 中 ,需要 调用 一 个 方法 来 告诉 Flutter 我 们 完成 了 一 个 
操作 ,就 像 之 前 使 用 的 setState() 方 法 一 样 。 我 们 可 以 通过 调用 notifyListeners() 方 法 来 实 
现 ,notifyListeners() 是 scoped_model 包 提 供 的 ,所 以 我 们 在 toggleFavorite() 方 法 执行 完 
更 新 逻辑 后 ,调用 notifyListeners() 方 法 ,代码 如 下 : 


// Chapter11/11 - 07/1ib/scoped models/news_scope model. dart 


_news[_selectedIndex] = updateNews; // 更 新 选中 的 资讯 
_selectedIndex = null; // 重 置 选中 资讯 索引 
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notifyListeners(); // 重新 执行 builder 中 的 方法 


调用 notifyListeners( ) 方 法 会 使 NewsCard 小 部 件 中 ScopedModelDescendant 的 
builder( ) 方 法 重新 执行 , 而 不 会 调用 NewsCard 小 部 件 中 build() 方 法 ,只 是 调用 
ScopedModelDescendant 包装 中 的 builder() 方 法 ,notifyListeners() 方 法 是 一 个 很 高 效 的 方 
法 。 保 存 后 ,在 资讯 列表 页 面 单 击 收藏 按钮 后 ,图 标 就 会 变 成 收藏 状态 。 


11.8 过滤 收藏 的 内 容 


本 节 我 们 在 导航 栏 中 添加 过 滤 收 藏 内 容 的 功能 。 单 击 导航 栏 中 的 收藏 按钮 显示 所 有 资 
讯 或 只 显示 收藏 的 资讯 。 例 如 ,如 果 导 航 栏 中 的 图 标 是 实心 的 收藏 图 标 ,只 显示 收藏 的 资 
讯 ; 如 果 是 空心 的 收藏 图 标 ,显示 所 有 的 资讯 。 这 意味 着 我 们 必须 能 够 返回 过 滤 的 资讯 
news 列表 。 

在 NewsScopeModel 中 ,我 们 需要 管理 一 个 新 的 数据 ,代码 如 下 : 


bool_showFavorites = false; // 过 滤 收 藏 内 容 的 状态 数据 


将 _showFavorites 的 默认 值 设 置 为 false, 表 示 显 示 全 部 的 资讯 。 如 果 _showFavorites 
为 true, 表 示 只 返回 收藏 的 资讯 数据 。 我 们 需要 一 个 方法 来 编辑 _showFavorites。 代 码 
如 下 : 


// Chapter11/11 - 08/1ib/scoped_models/news_scope_model. dart 
void toggleDisplayModel(){ // 切换 过 滤 的 状态 


_showFavorites = !_showFavorites; // 切换 bool 值 
} 


我 们 还 需要 返回 过 滤 后 的 资讯 数组 news, 需 要 在 NewsScopeModel 中 创建 一 个 获取 过 
滤 后 资讯 的 方法 。 代 码 如 下 : 


// Chapter11/11 - 08/1ib/scoped_models/news_scope_model. dart 


List < NewsScopeModel > get displayNews { // 过 滤 后 的 资讯 


if (_showFavorites) { // 如 果 只 显示 收藏 
return List. from(_news. where( (NewsModel news) { 
return news. isFavorite; // 收藏 的 资讯 列表 
}).toList()); // 转化 成 列表 
J}else{ // 否则 显示 全 部 


return List. from(_news); // 全 部 资讯 列表 
} 
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where() 方 法 返回 一 个 满足 要 求 的 新 的 列表 , where 需要 传递 一 个 方法 ,可 以 是 匿名 方 
法 ,匿名 方法 中 需要 传递 一 个 遍历 类 型 的 参数 ,匿名 方法 的 返回 值 是 bool 类 型 。Dart 自动 
遍历 整个 资讯 _news 列表 ,每 条 资讯 将 执行 一 次 匿名 方法 。 如 果 匿 名 方法 返回 true, 那 么 这 
条 资讯 news 就 是 返回 的 新 的 资讯 列表 中 的 一 条 记录 ; 如 果 返 回 false, 将 不 会 包含 在 新 的 
列表 中 。 最 后 需要 调用 toList() 方 法 返回 一 个 新 的 列表 ,这 样 我 们 就 返回 了 一 个 过 滤 后 的 
列表 。 

在 News 小 部 件 的 build() 方 法 中 ,把 model. newsList 改 成 model. displayNews, 然 后 
在 NewsListPage 页 面 中 设置 导航 栏 中 有 收藏 按钮 的 单 击 方法 和 状态 ,代码 如 下 : 


// Chapter11/11 - 08/1ib/widgets/news/news. dart 


appBar: AppBar( // 资讯 列表 导航 栏 
actions: < Widget >[ // 导航 栏 右 侧 操作 
ScopedModelDescendant < NewsScopeModel >(builder: 

(BuildContext context, 


Widget child, NewsScopeModel model) { // 使 用 scoped_model 
return IconButton( // 图 标 按钮 
icon: Icon(Icons. favorite), // 实心 收藏 图 标 
onPressed: () { // 单 击 按钮 事件 
model. toggleDisplayModel( ); // 切换 显示 状态 
} 
) 
])， 
], 
title: Text( ' 资 讯 标题 ')， // 导航 栏 标题 


)， 


在 NewsScopeModel 中 ,需要 添加 获取 显示 状态 的 方法 ,代码 如 下 : 
// Chapter11/11 - 08/1ib/scoped_models/news_scope_model. dart 
bool get displayFavorite{ // 获取 过 滤 模 式 状 态 


return _showFavorites; // 返回 是 否 显 示 收 藏 资讯 
} 


然后 在 导航 栏 的 按钮 中 ,增加 图 标的 显示 条 件 , 代 码 如 下 : 


// Chapter11/11 ~ 08/1ib/widgets/news/news. dart 


icon: model. displayFavorite? // 收藏 显示 实心 
Icon(Icons. favorite) :Icon(Icons. favorite_border), // 否则 显示 空心 


保存 并 重启 后 ,显示 效果 如 图 11.5 所 示 。 
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图 11.5 过 滤 收 藏 的 资讯 


11.9 添加 用 户 实体 


当 我 们 创建 一 个 资讯 news 的 时 候 , 需 要 把 用 户 的 id、 用 户 名 等 信息 添加 到 这 个 资讯 
news 中 。 首 先 在 models 目录 下 创建 一 个 UserModel, 然 后 在 目录 scope_models 中 创建 
UserScopeModel。UserModel 包含 用 户 id 和 用 户 名 ,代码 如 下 : 


// Chapter11/11 - 09/1ib/models/user_model. dart 


import 'package:flutter/material. dart'; // 引入 material 包 
class User { // 用 户 类 
final String id; 1/ 用 户 id 
final String userName; // 用 户 名 
final String password; // 密码 
User({@required this. id, // 构造 器 


@required this. userName, 
@required this. password} ); 
} 


UserModel 是 用 户 模型 , 它 允 许 我 们 创建 一 个 用 户 对 象 。 如 果 需 要 管理 用 户 数据 ,我 们 
需要 创建 一 个 scope model。 代 码 如 下 : 


// Chapter11/11 - 09/1ib/scoped models/user_scope model. dart 
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class UserScopeModel extends Model{ // 用 户 的 scope model 
UserModel] user; // 用 户 实体 类 


在 UserScopeModel 中 添加 一 个 登录 方法 login, 传 人 两 个 参数 ,代码 如 下 : 


// Chapter11/11 - 09/1ib/scoped_models/user_scope_model. dart 


void login(String userName, String password) { // 登录 方法 
0 // 根据 用 户 名 和 密码 创建 用 户 


UserModel (id: '1', userName: userName, password: password); 


} 


在 auth. dart 文件 中 提交 表单 的 方法 中 ,需要 调用 UserScopeModel 中 的 login() 方 法 ， 
但 是 登录 页 面 是 main. dart 文件 中 的 一 个 页 面 , main. dart 文件 中 使 用 了 ScopeModel， 
model 参数 只 能 指定 NewsScopeModel, 但 是 我 们 还 需要 使 用 UserScopeModel。 下 一 节 我 
们 解决 这 个 问题 。 


11.10 使 用 mix 特性 合并 模型 


我 们 创建 了 UserScopeModel ,需要 在 main. dart 文件 中 使 用 UserScopeModel, 因 为 登 
录 页 面 需要 使 用 UserScopeModel, 但 是 ScopedModel 的 model 参数 只 能 接收 一 个 scope 
model。 我 们 可 以 使 用 Dart 的 mix 特性 把 多 个 类 合并 到 一 起 。 首 先 创 键 一 个 新 的 模型 
MainScopeModel, 代 码 如 下 : 


// Chapter11/11 - 10/1ib/scoped models/main scope model. dart 
class MainScopeModel extends Model{} // 合并 后 的 模型 


然后 使 用 关键 字 with ,代码 如 下 : 


// Chapter11/11 - 10/1ib/scoped_models/main_scope_model. dart 

class MainScopeModel extends Model // 合并 类 

with NewsScopeModel, UserScopeModel{ // 合并 资讯 和 用 户 类 

} 

with 表示 把 其 他 类 的 方法 合并 到 当前 这 个 类 中 ,所 以 不 是 继承 一 个 类 。 
MainScopeModel 不 能 使 用 NewsScopeModel 类 和 UserScopeModel 类 中 的 方法 ,也 不 能 继 
承 它 们 的 属性 ,也 不 能 调用 构造 器 ,只 是 把 类 中 的 方法 和 属性 合并 到 一 个 类 中 ,这 样 就 把 
NewsScopeModel 和 UserScopeModel 两 个 类 合并 到 一 个 类 中 了 。 在 main. dart 文件 中 ,我 
们 使 用 MainScopeModel 给 ScopeModel 中 的 参数 model 赋值 ,代码 如 下 : 


// Chapter11/11 - 10/1ib/main. dart 
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Widget build(BuildContext context) { // 应 用 的 构建 方法 


return ScopedModel < MainScopeModel >( // 使 用 ScopedModel 
model: MainScopeModel( ), // 使 用 合并 后 的 类 


把 其 他 文件 中 的 NewsScopeModel 替换 成 MainScopeModel。 和 替换 后 不 会 报错 ,同时 
model 可 以 使 用 两 个 类 的 方法 。 
在 登录 页 面 使 用 MainScopeModel 调用 login() 方 法 登录 ,代码 如 下 : 


// Chapter11/11 - 10/1ib/pages/auth. dart 


ScopedModelDescendant < MainScopeModel >(builder: // 使 用 scope model 
(BuildContext context, Widget child, 
MainScopeModel model) { 


return RaisedButton( // 登录 页 面 登 录 按钮 
textColor: Colors.white, // 登录 按钮 文字 颜色 
color: Theme. of (context).accentColor, // 登录 按钮 背景 色 
child: Text(' 登 录 ')， // 登录 按钮 上 的 文字 
onPressed: (){ // 登录 按钮 单 击 事件 
submit (model); // 提交 方法 


}, 
); 
j)， 


单 击 登 录 按钮 调用 的 方法 需要 修改 ,代码 如 下 : 


// Chapter11/11 - 10/1ib/pages/auth. dart 


void submit(MainScopeModel model) { // 提交 方法 
model. login(_username, _password); // 登录 方法 
Navigator. pushReplacementNamed( context, '/home'); 
// 导航 到 首页 
} 


11.11 连接 模型 和 共享 数据 


现在 需要 把 NewsScopeModel 和 UserScopeModel 建立 联系 。 给 NewsModel 添加 一 
个 属性 userName, 当 我 们 创建 资讯 时 把 userName 作为 资讯 news 的 属性 保存 起 来 。 在 
NewsScopeModel 中 需要 修改 addNews 方法 。 代 码 如 下 : 


// Chapter11/11 - 11/1ib/scoped_models/mix model. dart 
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void addNews(String title, String description, double score, String image,) { 


// 添加 资讯 方法 
NewsModel news = NewsModel( // 创建 实体 对 象 
title: title, // 资讯 标题 
description: description, // 资讯 描述 
score: score, // 资讯 分 数 
image: 'assets/newsl1. jpg', // 资讯 图 片 
); 
_news. add(news); // 添加 到 数组 
_selectedIndex = null; // 重 置 选择 索引 


} 


userld 和 userName 这 两 个 参数 可 以 通过 UserScopeModel 获取 。 我 们 可 以 创建 一 个 
公共 的 类 MixModel 作为 父 类 ,然后 把 NewsScopeModel 的 属性 和 UserScopeModel 的 属性 
放 到 MixModel 中 ,类 NewsScopeModel 和 类 UserScopeModel 继承 MixModel, 这 样 实现 
共享 数据 。 同 时 把 类 NewsScopeModel 和 类 UserScopeModel 放 到 MixModel 所 在 文件 ,这 
样 能 保证 类 MixModel 中 属性 私有 。 代 码 如 下 : 


// Chapter11/11 - 11/1ib/scoped_models/mix_model. dart 


class MixModel extends Model { // 共享 数据 的 父 类 


List < NewsModel > _news = []; // 资讯 数组 数据 

int _selectedIndex; // 选中 的 资讯 索引 

bool showFavorites = false; // 过 滤 收 藏 属性 
UserModel _user; // 登录 的 用 户 


} 


MixModel 类 表示 用 户 和 资讯 的 连接 , 它 在 管理 资讯 news 数据 的 同时 也 知道 用 户 user 
的 数据 。 
在 NewsCard 小 部 件 中 添加 一 个 文本 Text 显示 用 户 名 userName 属性 ,代码 如 下 : 


// Chapter11/11 - 11/1ib/widgets/news/news_card. dart 
Score(news. score. tostring()), // 资讯 分 数 
Text (news. userName), // 创建 资讯 的 用 户 名 


然后 在 NewsScopeModel 类 中 ,修改 添加 资讯 方法 ,代码 如 下 : 


// Chapter11/11 - 11/1ib/scoped_models/mix_model. dart 


image: 'assets/newsl. jpg', // 资讯 实体 的 图 片 
userId: _user. id, // 创建 资讯 的 用 户 id 
userName: _user. userName // 创建 资讯 的 用 户 名 
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使 用 同样 的 方式 ,在 UserScopeModel 中 把 收藏 方法 和 更 新 也 加 上 用 户 名 和 用 户 id。 
最 后 修改 一 下 编辑 资讯 页 面 ,在 添加 和 更 新 资讯 方法 中 传人 对 应 参数 。 代 码 如 下 : 


// Chapter11/11 - 11/1ib/scoped models/mix model. dart 


// 添加 资讯 的 方法 


model.addNews(title, description, score, 'assets/news1. jpg'); 


// 更 新 资讯 的 方法 
model. updateNews(title, description, score, 'assets/news1. jpg'); 


11.12 总 结 


正确 地 管理 数据 状态 可 以 使 复杂 的 应 用 变 得 简单 。 本 章 我 们 创建 了 自 定义 的 类 并 使 用 
它 保存 数据 , 自 定义 类 使 应 用 变 得 更 加 清晰 。 我 们 还 学 习 了 scoped_model, 它 是 一 个 第 三 
方 包 ,能 管理 应 用 的 数据 ,替代 使 用 长 链条 方式 传递 数据 ,scoped_model 还 可 以 把 数据 集中 
管理 。 

我 们 在 main. dart 中 指定 参数 model 的 值 ,这 个 值 可 以 向 下 传递 。 我们 还 可 以 调用 
notifyListeners() 方 法 来 重新 调用 builder 中 的 方法 ,并 通过 with 合并 多 个 scope model。 


Flutter 与 HTTP 


现在 App 能 够 新 建 查看、 编辑 和 删除 资讯 news, 但 是 当 我 们 重启 应 用 后 ,所 有 的 资讯 
数据 都 会 丢失 。 我 们 可 以 创建 后 端 服 务 器 ,然后 在 服务 器 上 存储 资讯 数据 、 获 取 资 讯 数 据 。 
我 们 可 以 搭建 这 样 的 服务 器 ,例如 Web 服务 器 ,然后 App 发 送 HTTP 请 求 ,把 数据 发 送 到 
服务 器 ,并 在 服务 器 存储 这 部 分 数据 ,或 者 App 发 送 HTTP 请 求 获 取 资 讯 列 表 的 数据 。 服 
务 器 端 使 用 RESTful API 提供 后 端 服务 。 接 下 来 我 们 看 一 下 RESTful API 提供 了 哪些 服 
务 , 以 及 如 何在 Flutter 应 用 程序 中 与 后 端 服务 器 交互 。 


12.1 后 端 服务 接口 


后 端 服务 不 需要 在 页 面 上 显示 内 容 , 因 为 我 们 不 会 通过 浏览 器 去 访问 页 面 ,而 是 通过 服 
务 端 提供 的 接口 与 后 端 服 务 交 互 。 搭 建 后 端 服务 不 在 这 里 过 多 介绍 ,这 里 主要 学 习 Flutter 
如 何 与 后 端 服务 交互 。 后 端 服务 定义 了 新 建 资讯 的 接口 ,如 图 12. 1 所 示 。 


news-api-controller Noms PT Con r 


图 12.1 后 端 新 增资 讯 接口 
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新 增资 讯 成 功 后 ,返回 的 结果 如 图 12. 2 所 示 。 


Response Body 


569978488286, 


: null, 


"title": "test-01", 
"descripti 
"price”: "1", 
"userEmail 
"userld": 


"imageUrl” 


图 12.2 新 增资 讯 的 响应 结果 


12.2 ”Flutter 发 送 POST 请 求 


发 送 请 求 需 要 第 三 方 包 http ,访问 https://pub. dev/packages/ 搜 索 http ,我 们 可 以 看 
到 这 个 包 , 如 图 12. 3 所 示 。 


Flutter Web & Server 


Getting Started: 


http 0.12.0+ 


PR 全 WEB = OTHER 


Readme 


A composable, Future-based library for making HTTP requests 
ED CH 


This package contains a set of high-level functions and classes that make it easy to 
consume HTTP resources. Its platform-independent, and can be used on both the command 
line and the browser 


Using 


The easiest way to use this library is via the top-level functions. They allow you to make 
individual HTTP requests with minimal hassle: 


import 'package http.dart 


var url = ‘http://example 

var response = await http. doodle’, ‘color': ‘blue’}) 
print('Response us: ${response.statusC 

print('Response ${response, body}'); 

print(await http, read{'http://example. com/foobar, txt")); 


About 

A composable, cross-platform, 
Future-based APIfor making HTTP 
requests. 

Reposltory (GItHub) 

View/report Issues 


APlreference 


Author 
加 QQ DartTeam 


Uploaders 

BQ dgrove@google.com 
加 Q jmesserly@google com 
国 Q sigmund@google com 
国 Q nwelzGgoogle com 

国 Q kevmoo@google.com 
国 Q jakemac@google com 
国 Q miQ@ogooglecom 

国 Q nbosch@google com 


License 


图 12.3 第 三 方 包 http 
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单 击 “Installing” 按 钮 可 以 看 到 http 包 的 使 用 方式 ,如 图 12.4 所 示 。 


http 0.12.0+2 


Published Apr3,2019 。 FLUTTER WEB OTHER 


Readme Changelog Example Installing 


Use this package as a library 


1. Depend on it 


Add this to your package's pubspec yaml file: 


dependencies: 
http: “0.12.,0+2 


2. Install it 


You can install packages from the command line 


with pub 
pub get 


with Flutter 


About 
A composable, cross-platform, 
Future-based API for making HTTP 
requests. 

Repository (GtHub) 

View/report issues 

APlreference 


Author 
BQ Dart Team 


Uploaders 

国 Q dgrove@google.com 
a Q jmesserly@google.com 
国 Q siomund@google com 
国 Q nweiz@google com 

国 Q kevmoo@google com 
国 Q jakemac@google com 
男 Q mit@google.com 

国 Q nbosch@google com 


License 
BSD (LICENSE) 


Dependencies 


async,http_parser path, pedantic 


flutter pub get a 


Packages that depend on http 


Alternatively, your editor might support pub get or flutter pub get. Check the docs for 
your editor to learn more. 


12.4 http 包 的 使 用 方式 


在 pubspec. yaml 中 粘贴 依赖 ,代码 如 下 : 


dependencies : // 项 目 依赖 


flutter: 
sdk: flutter // flutter 的 sdk 
scoped_model: “1.0.1 // 集中 管理 状态 数据 
http: ^0.12.0+2 // 发 送 HTTP 请 求 


保存 后 ,IDE 会 自动 获取 这 个 文件 包 , 也 可 以 在 命令 行 中 输入 flutter package get 来 获 
取 这 个 包 , 安 装 完成 后 就 可 以 使 用 http 包 了 ,我们 在 scope model 中 使 用 http 包 。 

在 mix_model. dart 文件 中 ,我 们 已 经 定义 了 添加 资讯 的 方法 addNews(),addNews() 
方法 创建 的 资讯 news 保存 在 本 地 ,现在 需要 把 创建 的 资讯 发 送 到 服务 器 ,并 在 服务 器 中 保 
存 这 条 资讯 。 在 addNews () 方 法 中 ,我 们 可 以 使 用 http 包 提供 的 客户 端 发 送 一 个 POST 
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请 求 ,POST 请 求 是 HTTP 的 一 种 请 求 方式 .表示 可 以 隐 式 地 传送 数据 ,POST 请 求 的 地 址 
是 上 一 节 中 RESTful API 暴露 的 接口 。 
首先 需要 引入 http 包 , 代 码 如 下 : 


import 'package:http/http. dart' as http; // 引 入 http 包 


引入 语句 中 使 用 as http 可 以 避免 命名 冲突 。as 后 面 的 内 容 可 以 自 定义 ,这 样 http 包 
中 引用 的 所 有 属性 和 方法 都 集中 到 http 这 个 对 象 中 。http 包 提 供 了 很 多 方法 ,例如 post() 
方法 等 。 

在 addNews() 方 法 中 ,使 用 http 包 中 的 方法 向 服务 器 端 发 送 请 求 ,代码 如 下 : 


// Vee es 02/1ib/scoped models/mix_model. dart 
void addNews( String title, String description, double score, String image) { // 添加 资讯 方法 


http. post( ); // 发 送 POST 请 求 


http 包 还 提供 了 其 他 的 方法 ,例如 get() 方 法 .put() 方 法 等 。 这 里 使 用 post() 方 法 。 在 
参数 中 传人 后 端 API 暴露 的 地 址 ,代码 如 下 : 


http. post( 'http://localhost:6379/news - api/addNews') // 传人 地 址 


这 样 我 们 就 创建 了 一 个 POST 请 求 , 但 是 请 求 中 没有 包含 数据 ,只 有 一 个 地 址 。 要 使 
请 求 中 包含 数据 ,首先 需要 创建 一 个 Map 类 型 , 键 是 字符 串 类 型 , 值 是 动态 的 ,代码 如 下 : 


// Chapter12/12 - 02/1ib/scoped_models/mix_model. dart 


Map < String, dynamic > newsData= { // 发 送 的 数据 


‘title': title, // 资讯 标题 
"description': description, // 资讯 描述 
'score': score, // 资讯 分 数 
'userEmail': _user. userNanme, // 创建 资讯 用 户 
'userId': _user. id, // 用户 id 
"imageUrl': // 图 片 地 址 
'http://i9. hexunimg. cn/2014- 12 - 04/171106102. jpg', 
"imagePath' :7 // 图 片 路 径 


] 


这 里 的 图 片 使 用 的 是 网 络 上 的 图 片 , 接 下 来 需要 把 newsData 通过 post() 方 法 发 送 到 
服务 器 端 ,post() 方 法 中 有 个 参数 body, 它 的 值 是 POST 请 求 中 需要 发 送 到 服务 器 端的 数 
据 , 可 以 把 newsData 赋值 给 body。 

这 样 就 可 以 发 送 HTTP 请 求 了 ,HTTP 请 求 过 程 需要 时 间 , 即 使 服务 器 端 响 应 得 再 快 
也 不 可 能 像 本 地 代码 这 样 执行 ,因此 不 可 以 在 发 送 请 求 的 下 一 行 直 接 编写 代码 。 保 存 并 重 
启 应 用 ,在 应 用 中 创建 一 条 资讯 news 后 ,如 图 12.5 所 示 。 
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图 12.5 App 新 增资 讯 


我 们 发 现 服务 器 端 新 增 了 一 条 资讯 ,如 图 12.6 所 示 。 


Request URL 


http://localhost:6379/news-api/allNewsList 


Response Body 


"title": "title-07", 

"description": "desg7"， 

"price": 

"score" 

"image": "http://i9.hexunimg.cn/2014-12-84/171106102. jpg", 
"userEmail": "test-07", 

"userId": 


"imagePath": "", 
"wishListUsers": [], 
"favorite": false 


图 12.6 服务 端 资讯 列表 


第 12 章 “Flutter 与 HTTP | 191 


服务 器 端 新 增 的 资讯 自动 生成 了 id, 所 以 MixModel 中 的 POST 请 求 已 经 生效 了 。 下 
节 学 习 如 何 与 响应 结果 进行 交互 。 


12.3 使 用 请 求 响应 结果 


服务 器 返回 的 结果 中 包含 资讯 id, 现 在 NewsModel 类 中 并 没有 资讯 id 这 个 属性 ,需要 
添加 一 下 ,代码 如 下 : 

final String id; // 资 讯 id 

在 MixModel 中 ,资讯 id 应 该 是 从 服务 器 端 返回 的 。post() 方 法 返回 的 是 Future 类 
型 ,表示 这 个 方法 执行 过 程 需 要 一 些 时 间 , 当 这 个 方法 执行 完成 时 会 提醒 我 们 。Future 提 
供 了 then() 方 法 ,then() 方 法 中 需要 传人 一 个 方法 作为 参数 ,表示 当 服 务 器 端的 响应 完成 
时 ,调用 then() 方 法 ,所 以 当 这 个 异步 请 求 完成 时 ,方法 中 的 内 容 会 被 执行 。 传 人 的 可 以 是 
匿名 方法 ,所 以 任何 依赖 这 个 异步 代码 完成 后 才能 继续 执行 的 内 容 ,都 应 该 放 到 这 个 方法 体 
中 。 代 码 如 下 : 


// Chapter12/12 - 03/1ib/scoped_models/mix_model. dart 


http 
.post( 'http://localhost:6379/news - api/addNews'， 
body: newsData) 
.then( (response) { 


和 


匿名 参数 中 传人 一 个 http. Response 类 型 的 参数 response。response 中 包含 属性 
body,HTTP 响应 状态 码 statusCode。 我 们 需要 使 用 body 中 的 内 容 ,body 中 的 内 容 是 
JSON 格式 ,所 以 必须 把 它 转换 后 再 使 用 。 首 先 需要 引入 Dart 的 一 个 包 ,代码 如 下 : 


import 'dart:convert'; // 引 入 convert 
然后 将 body 中 的 数据 转换 成 Map 格式 ,代码 如 下 : 


// JSON 转换 成 Map 
Map < String, dynamic > responseData = json. decode(response. body); 


最 后 把 responseData 中 的 id 赋值 给 NewsModel。 代 码 如 下 : 


// Chapter12/12 - 03/1ib/scoped models/mix_model. dart 


NewsModel news = NewsModel( // 新 建 资讯 实体 对 象 
id: responseData[ 'id']. tostring(), // 给 资讯 id 赋值 
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12.4 ”从 服务 器 端 获取 数据 


上 一 节 我 们 通过 http 包 中 的 postO 〇 方法 向 服务 器 端 添加 了 资讯 数据 ,本 节 实 现在 资讯 
列表 页 面 NewsListPage 获取 服务 器 端的 列表 数据 。 在 mix_model. dart 文件 中 可 以 添加 一 
个 fetchNews() 方 法 ,返回 值 设 为 空 。 

void fetchNews(){} // 获 取 资 讯 列表 


方法 中 使 用 http. get() 方 法 获取 资讯 列表 数据 ,在 http. get() 方 法 中 需要 传人 获取 资 
讯 列 表 的 地 址 。 接 口 定义 如 图 12.7 所 示 。 


curt -X er] -neater "Accept: application/json" "http://localhost:6379/news-api/allNewsList" 
HTTP 请 求 方式 


请 求 地 址 


响应 结果 


"favorite": false 


Response Code 


200 


图 12.7 获取 资讯 列表 接口 


get() 方 法 返回 列表 数据 后 需要 调用 then() 方 法 ,在 then() 方 法 中 ,同样 需要 传人 匿名 
方法 ,代码 如 下 : 


// Chapter12/12 - 04/1ib/scoped models/mix model. dart 
void fetchNews() { // 获取 资讯 列表 


http 
.get( 'http://localhost:6379/news - api/allNewsList') 
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.then( (http. Response response) {}); // 响应 结果 


然后 把 响应 结果 中 的 值 转 码 赋值 给 NewsModel, 代 码 如 下 : 


// Chapter12/12 - 04/1ib/scoped models/mix model. dart 
List < dynamic > nesListData = json. decode(response. body); // 转 码 
final List < NewsModel > getNewslist = []; // 定义 变量 


nesListData. forEach( (dynamic newsDataParam) { // 变量 列表 


Map < String, dynanmic > newsData 


= newsDataParam[ 'productDTO']; // 获 取 资 讯 数 据 
NewsModelnewsModel = NewsModel( // 创建 资讯 实体 
id: newsData[ 'id'].toString()， // 赋值 资讯 id 
title: newsData[ 'title'], // 赋值 资讯 标题 
description: newsData[ 'description'], // 赋值 资讯 描述 
Score: newsData[ 'score'] 
== null ? 0.0 : newsData[ 'score'],， // 赋值 资讯 分 数 
userId: newsData[ 'userId'], // 赋值 用 户 id 
userName: newsData[ 'userEmail'], // 赋值 用 户 名 
image: newsData[ 'imagePath'], // 赋值 资讯 图 片 
) 
getNewslist. add(newsModel) ; // 添加 到 列表 变量 
i 
_news = getNewslist; // 把 列表 变量 赋值 给 属性 


资讯 列表 页 面 NewsListPage, 需要 访问 scope model。 在 main. dart 文件 中 ,把 
MainScopeModel 定义 成 一 个 变量 ,代码 如 下 : 


MainScopeModel model = MainScopeModel(); // 创 建 MainScopeModel 对 象 


然后 把 对 象 model 传 给 ScopeModel 的 参数 model, 再 把 对 象 model 传 给 
NewsListPage 页 面 。 在 对 象 model 页 面 中 ,每 次 显示 页 面 的 时 候 使 用 这 个 model, 需 要 把 
NewsListPage 中 的 StatelessWidget 改 成 StatefulWidget, 然 后 在 _NewsListPageState 类 中 
添加 initState() ,在 页 面 第 一 次 加 载 的 时 候 调用 initState() 方 法 。 在 这 里 调用 model 中 的 
fetchNews() 方 法 。 代 码 如 下 : 


// Chapter12/12 - 04/1ib/pages/news_list. dart 
@override 


void initState() { 
super. initState( ); 
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widget. model. fetchNews() 
} 


保存 并 重启 后 ,我 们 就 可 以 从 服务 器 端 获 得 数据 了 。 这 里 显示 的 图 片 使 用 的 是 网 络 上 
的 图 片 , 所 以 在 NewsCard 小 部 件 中 需要 把 asset() 方 法 改 成 network() 方 法 ,代码 如 下 : 


Image. network(news. image) // 访 问 网 络 图 片 
这 样 我 们 就 能 加 载 从 服务 器 端 获取 的 资讯 列表 了 ,如 图 12.8 所 示 。 


图 12.8 资讯 列表 页 面 


12.5 实现 加 载 条 


在 我 们 等 待 数据 加 载 完 成 时 ,需要 显示 一 些 内 容 , 例 如 加 载 条 。 等 数据 加 载 完 成 之 后 ， 
隐藏 加 载 条 。 

在 mix_model. dart 文件 中 ,我 们 同时 管理 资讯 news 和 用 户 user 的 属性 ,在 MixModel 
中 添加 属性 _isLoading, 代 码 如 下 所 示 : 


bool_isLoading = false; // 是 否 显 示 加 载 条 


默认 值 设 为 false, 当 _isLoading 的 值 是 true 时 ,表示 正在 加 载 。 我 们 需要 添加 获取 
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_isLoading 的 方法 ,代码 如 下 : 
// chapter12/12 - 05/1ib/scoped models/mix model. dart 
bool get isLoading{ // 获取 _isLoading 


return _isLoading; // 返回 _isLoading 
} 


然后 在 fetchNews() 方 法 中 ,设置 加 载 状 态 ,代码 如 下 : 


// Chapter12/12 - 05/1ib/scoped models/mix model. dart 


void fetchNews() { // 从 服务 器 端 获取 数据 的 方法 


_isLoading = true; // 加 载 状态 设置 为 true 


notifyListeners(); // 调用 页 面 builder 中 的 方法 


后 在 响应 结束 后 ,把 加 载 状 态 设置 为 false, 代 码 如 下 : 


// Chapter12/12 - 05/1ib/scoped models/mix model. dart 


_news = getNewslist; // 把 服务 器 端 数 据 赋值 给 _news 
_isLoading = false; // 加 载 状 态 设置 为 false 


notifyListeners(); // 调用 页 面 builder 中 的 方法 


在 资讯 列表 页 面 NewsListPage 中 ,我 们 通过 News 小 部 件 泻 染 了 列表 页 面 ,所 以 在 
News 小 部 件 外 加 上 ScopedModelDescendant, 代 码 如 下 : 


// Chapter12/12 - 05/1ib/pages/news_list. dart 


body: ScopedModelDescendant < MainScopeModel >(builder: // builder() 方 法 
(BuildContext context, Widget child, MainScopeModel model) { 


return model. isLoading ? CircularProgressIndicator() : News(); 
// 根据 加 载 状 态 不 同 显示 不 同 的 内 容 
}), 


CircularProgressIndicator 是 加 载 条 小 部 件 ,这 里 可 以 优化 一 下 ,让 它 居中 显示 加 载 条 ， 
代码 如 下 : 


Center(child:CircularProgressIndicator( )) // 居 中 显示 图 形 加 载 条 


显示 效果 如 图 12. 9 所 示 。 


196 十 | Flutter 实 战 指南 


图 12.9 图 形 加 载 条 


12.6 按钮 显示 加 载 条 


在 编辑 资讯 页 面 EditNewsPage 的 提交 按钮 这 里 需要 使 用 scope model, 然 后 判断 加 载 
状态 的 值 ,如 果 _isLoading 为 true, 显 示 图 形 加 载 条 ,和 否则 显示 按钮 。 代 码 如 下 : 


// Chapter12/12 - 06/1ib/pages/edit news. dart 


Widget _buildSubmitButton(MainScopeModel model) { // 构建 按钮 方法 


return ScopedModelDescendant < MainScopeModel >( // 添加 scope model 
builder: (BuildContext context, // 构建 方法 
Widget child, MainScopeModel model) { 
return model. isLoading ? // 加 载 中 
Center(child: CircularProgressIndicator()) // 显示 图 形 加 载 条 
:RaisedButton( // 否则 显示 按钮 
color: Theme. of(context) . accentColor, // 按钮 背景 色 
textColor: Colors. white, // 按钮 文字 颜色 
child: Text( ' 创 建 ')， // 按钮 上 的 文字 
onPressed: () { // 按钮 单 击 事件 


_submitForm(model); // 提交 方法 
}, 
); 
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在 编辑 资讯 页 面 创 建 资讯 时 ,发 现 没 有 等 编辑 资讯 页 面 EditNewsPage 创建 完成 就 直 
接 导航 到 资讯 列表 页 面 了 。 

我 们 可 以 给 添加 资讯 的 方法 添加 返回 值 ,类 型 是 Future, 返 回 值 泛 型 可 以 设置 为 Null， 
代码 如 下 : 


Future < Null > addNews( -… // 添加 资讯 的 方法 


设 为 Null 表示 我 们 不 需要 addNews() 方 法 返回 任何 数据 。 只 想 在 addNews() 方 法 执 
行 完 成 后 做 下 一 步 操作 ,所 以 这 里 可 以 把 http. post() 直 接 返 回 。 这 样 addNews() 方 法 就 返 
回 了 一 个 Future, 然 后 在 编辑 资讯 页 面 中 添加 方法 后 面 可 以 调用 then() 方 法 ,代码 如 下 : 


// Chapter12/12 - 06/1ib/pages/edit_news. dart 
model.addNews(title, description, score, // 添加 资讯 方法 
'assets/news1. jpg').then((_) { // 响应 后 再 跳 转 


Navigator. pushReplacementNamed( context, '/home'); 
}); 


保存 并 重启 后 ,显示 效果 如 图 12. 10 所 示 。 


管理 资讯 


图 12.10 所 示 按 钮 的 加 载 条 
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12.7 通过 HTTP 更 新 数据 


我 的 资讯 页 面 MyNewsPage 也 是 需要 获取 数据 的 ,所 以 要 把 它 改 成 StatefulWidget, 然 
后 通过 MyNewsPageState 类 中 的 initState() 方 法 ,获取 资讯 列表 数据 。 因 为 要 使 用 model 
获取 数据 ,所 以 在 main. dart 文件 中 ,把 model 对 象 传 到 MyNewsPage, 我 们 虽然 使 用 了 传 
递 参数 ,但 是 这 种 情况 并 不 多 。 在 管理 资讯 页 面 ManageNews 中 ,接收 model 对 象 ,然后 把 
model 对 象 传递 到 MyNewsPage 页 面 中 。 

在 _MyNewsPageState 中 覆盖 initState() 方 法 ,在 initState() 方 法 中 调用 model 中 的 
fetchNews() 方 法 获取 资讯 列表 数据 。 代 码 如 下 : 


// Chapter12/12 - 07/1ib/pages/my_news. dart 


@override 

void initState() { // 我 的 资讯 初始 化 方法 
super. initState( ); // 父 类 初始 化 方法 
widget. model. fetchNews( ); // 调用 获取 资讯 的 方法 


} 


我 们 使 用 StatefulWidget 是 因为 需要 调用 scope model 中 的 方法 ,而 StatelessWidget 
只 有 构造 器 方法 和 build() 方 法 ,没有 地 方 加 载 数据 。 在 StatefulWidget 中 的 initState( ) 方 
法 中 可 以 调用 获取 数据 的 方法 来 加 载 资讯 列表 ,执行 完 initState() 方 法 后 才 会 执行 build() 
方法 ,所 以 需要 在 initState() 方 法 中 初始 化 数据 ,然后 调用 build() 方 法 构建 小 部 件 。 这 样 
每 次 加 载 页 面 时 ,都 会 通过 initState() 方 法 重新 加 载 数据 ,以 此 保证 获取 的 数据 都 是 最 
新 的 。 

MixModel 中 的 updateNews() 方 法 需要 修改 一 下 ,代码 如 下 : 


// Chapter12/12 - 07/1ib/scoped_ models/mix model. dart 


void updateNews( // 更 新 资讯 方法 
String title, 
String description, 
double score, 
String image, 
和 
NewsModel news = NewsModel( // 更 新 的 实体 对 象 
id:selectedNews. id, // 选择 的 资讯 id 
title: title, 


服务 器 端 更 新 资讯 的 接口 ,如 图 12. 11 所 示 。 
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/news-api/updateNews/{newsld} updateproduct 


Response Class (Status 200) 
Model Schema 


"createDate": "2819-19-92T23:02:31.506Z"， 
"description": "string", 
"id"; @, 


Response Content Type | application/ison $ 


Parameters 

parameter Value Description Parameter Type ”Data Type 
newsId (required) newsld path string 
title (required) title query string 
description [required) description query String 
score (required) Score query string 
userEmail (required) userEmail query string 
userld (required) userld query string 
imagePath (required) imagepPath query string 
imageurt (required) imageurl query string 


Response Messages 


HTTP Status Code Reason Response Model Headers 
201 Created 

481 Unauthorized 

403 Forbidden 

404 Not Found 

Ty lt out 


图 12.11 更 新 资讯 接口 


接口 的 URL 中 需要 添加 选中 的 id, 可 以 使 用 $ (selectedNews. id} 。 代 码 如 下 : 


http. post( 'http://localhost:6379/news - api/updateNews/ $ {selectedNews. id} '); 
// 发 送 更 新 请 求 


更 新 的 数据 需要 赋值 给 参数 body, 代 码 如 下 : 
// Chapter12/12 - 07/1ib/scoped_models/mix_model. dart 
Map < String, dynamic > updateData = { // 更 新 的 资讯 数据 


'newsId': selectedNews. id, // 资讯 id 
'title': title, // 资讯 标题 


200 所 | Flutter 实 战 指南 


"description': description, // 资讯 描述 
'score': score.toString()， // 资讯 分 数 
'userEmail': user. userName, // 用 户 名 
'userId': _user. id, // 用户 id 
'imageUr]l': // 资讯 图 片 

"http://i9. hexunimg. cn/2014 - 12 - 04/171106102. jpg', 

"imagePath': '" // 图 片 路 径 


}; 


然后 调用 then() 方 法 ,再 传人 方法 ,方法 中 的 参数 是 http. Response response。 这 里 也 
需要 使 用 图 形 加 载 条 ,使 用 方式 与 添加 资讯 方法 addNews() 方 法 相同 。 


12.8 通过 Http 删除 内 容 


在 我 的 资讯 页 面 MyNewsPage 中 ,删除 资讯 的 方法 只 是 本 地 删除 ,如 果 要 在 服务 器 端 
删除 资讯 ,需要 调用 服务 器 端的 接口 ,如 图 12. 12 所 示 。 


| os | /news-api/deleteNews/{newsld} 


deleteproduct 


Parameters 


Parameter Value Description Parameter Type Data Type 


newsId [equired) newsld path string 


Response Messages 


HTTP Status Code Reason Response Mode! Header 
200 OK 

281 Created 

491 Unauthorized 

493 Forbldden 

494 Not Found 


图 12.12 删除 资讯 接口 


在 mix_model. dart 文件 中 ,修改 删除 资讯 deleteNews() 方 法 ,代码 如 下 : 


http. post( 'http://localhost:6379/news - api/deleteNews/ $ {selectedNews. id} '); // 删 除 资讯 
方法 


当 我 们 删除 某 条 资讯 后 ,需要 重新 加 载 列 表 , 所 以 在 deleteNews( ) 方 法 返回 后 调用 
then() 方 法 ,在 then() 方 法 中 重新 获取 资讯 列表 ,代码 如 下 : 


// Chapter12/12 - 08/1ib/scoped_models/mix_model. dart 


void deleteNews() { // 删除 资讯 方法 
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http 
.post( 'http://localhost:6379/news - api/deleteNews/ $ {selectedNews. id}') 
// 调用 接口 删除 
.then( (http. Response response) { 
fetchNews(); // 删除 后 更 新 列表 


D); 
_selectedIndex = null; // 重 置 选中 索引 
} 


这 样 我 们 就 通过 服务 器 端 完 成 了 删除 资讯 的 操作 。 


12.9 下 拉 页 面 刷新 


现在 App 的 功能 已 经 很 全 面 了 ,但 还 有 一 些 地 方 需要 优化 。 在 资讯 列表 页 面 
NewsListPage 中 ,我 们 想 实 现下 拉 页 面 获取 最 新 数据 的 功能 。 例 如 如 果 有 些 用 户 通 过 App 
添加 了 资讯 news, 我 们 通过 下 拉 刷 新 这 个 页 面 获取 最 新 数据 。 在 Flutter 中 ,这 个 功能 很 容 
易 实 现 。 在 NewsListPage 页 面 中 ,用 小 部 件 RefreshIndicator 包装 资讯 列表 的 内 容 。 代 码 
如 下 : 


// Chapter12/12 - 09/1ib/pages/news_list. dart 


return model. isLoading // 加 载 状态 
? Center(child: CircularProgressIndicator( )) // 加 载 条 
: RefreshIndicator(child: News(),onRefresh: (){ // 下 拉 刷 新 
return model. fetchNews( ); // 获取 资讯 


},); 


RefreshIndicator 需要 传人 其 他 参数 onRefresh ,表示 当 用 户 下 拉 时 会 自动 加 载 一 个 加 
载 条 ,RefreshIndicator 需要 返回 一 个 Future 类 型 的 数据 ,因为 RefreshIndicator 需要 知道 
什么 时 候 数据 加 载 完成 ,加 载 完 成 后 把 加 载 条 隐藏 ,所 以 在 mix_model. dart 文件 中 给 获取 
资讯 fetchNews() 方 法 加 上 Future< Null > 返回 类 型 ,代码 如 下 : 


Future < Null > fetchNews() { // 获取 资讯 列表 


Null 表示 返回 资讯 列表 后 不 做 任何 处 理 , 只 是 告诉 RefreshIndicator 什么 时 候 完 成 ,这 
样 就 实现 了 下 拉 页 面 刷 新 的 功能 .如 图 12. 13 所 示 。 
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资讯 列表 


图 12.13 下 拉 刷 新 页 面 


12.10 占 位 图 片 


在 应 用 中 显示 网 络 图 片 需 要 一 段 时 间 , 有 可 能 图 片 文件 过 大 需要 一 段 时 间 下 载 。 目 前 
这 种 显示 方式 不 太 好 。 我 们 可 以 添加 一 个 占 位 图 片 , 等 网 络 图 片 加 载 完成 后 替换 这 个 占 位 
图 片 。 在 资讯 列表 页 面 中 ,我 们 使 用 NewsCard 小 部 件 显示 图 片 。 在 news_card. dart 文件 
中 ,把 图 片 小 部 件 用 FadeInImage 小 部 件 包 装 一 下 ,代码 如 下 : 


// Chapter12/12 - 10/1ib/widgets/news/news_card. dart 


FadeInImage( // 渐进 效果 占 位 图 片 
image: NetworkImage(news. image), // 实际 加 载 的 图 片 
), 


FadeInImage 首先 加 载 一 个 占 位 图 片 , 当 下 载 好 需要 显示 的 图 片 后 ,会 把 这 个 占 位 的 图 
片 逐渐 替换 掉 。 参 数 image 表示 需要 下 载 的 图 片 。 参 数 image 需要 传人 ImageProvider 类 
型 的 数据 ,所 以 我 们 的 NetworkImage 还 需要 设置 一 个 占 位 图 片 ,参数 是 placeholder。 我 们 
可 以 通过 AsseImage 创建 一 个 本 地 图 片 。 代 码 如 下 所 示 : 
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placeholder: AssetImagel( 'assets/newsl1. jpg'), // 占 位 图 片 

placeholder 表示 无 论 图 片 是 否 加 载 成 功 都 可 以 显示 这 个 占 位 图 片 。 我 们 还 需要 配置 
图 片 的 加 载 形 式 , 因 为 被 加 载 图 片 的 宽 高 可 能 与 占 位 图 片 的 宽 高 不 同 ,所 以 这 里 需要 指定 占 
位 图 片 的 大 小 和 被 加 载 图 片 的 大 小 ,让 它们 保持 一 致 。 为 了 使 图 片 显示 出 来 后 不 变形 ,不 要 
同时 设置 宽 高 ,这 里 设置 height:300。 

FadeInImage 中 还 有 一 个 参数 fit,fit 告诉 Flutter 如 何在 两 个 维度 上 拟 合 图 像 ,而 不 是 
它 的 原生 维度 ,这 里 可 以 设置 为 BoxFit. cover, 这 样 图 片 就 不 会 扭曲 了 。 我 们 还 可 以 添加 动 
画 效 果 等 参数 ,可 以 根据 需要 去 设置 。 


12.11 优化 Scoped Model 


在 main. dart 文件 中 ,我 们 是 通过 资讯 的 索引 传递 数据 的 ,代码 如 下 : 


// Chapter12/12 - 11/1lib/main. dart 


if (paths[1] == 'news') { // 解析 路 径 


final int index = int.parse(paths[2]); // 获取 索引 
return MaterialPageRoute < bool >(builder: (context) { 

return NewsDetailPage( index: index); // 资讯 详情 页 
Ty 


} 


这 里 我 们 需要 使 用 资讯 的 id 进行 加 载 ,因为 资讯 列表 _news 中 的 索引 顺序 可 能 会 发 生 
变化 ,所 以 这 里 使 用 索引 有 问题 。 保 证 资讯 news 唯一 性 的 属性 是 从 服务 器 中 获取 的 资讯 
id, 我 们 用 资讯 id 替换 资讯 索引 。 

在 main. dart 文件 中 ,使 用 资讯 id 的 方式 跳 转 到 NewsDetailPage 页 面 。 代 码 如 下 : 


// Chapter12/12— 11/1ib/main. dart 


if (paths[1] == 'news') { // 解析 路 径 


final String newsId = paths[2]; // 资讯 id 
model. selectNews(newsId) ; // 选择 资讯 
return MaterialPageRoute < bool >(builder: (context) { 

return NewsDetailPage(); // 资讯 详情 页 
二 


在 资讯 详情 页 中 ,不 需要 使 用 参数 方式 获取 数据 ,可 以 使 用 scope model 中 的 功能 加 载 
已 经 选中 的 资讯 news。 在 跳 转 到 资讯 详情 页 面前 ,我 们 通过 model. selectNews() 方 法 传人 
newsld 指定 当前 已 经 选中 的 资讯 news。 
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在 mix_model. dart 文件 中 ,首先 把 选中 的 资讯 索引 _selectedIndex 替换 成 _selectedNewsld。 
代码 如 下 
String _selectedNewsId; // 选中 的 资讯 id 
selectNews() 方 法 的 参数 还 是 int 类 型 ,需要 改 成 String 类 型 ,代码 如 下 : 
// Chapter12/12 - 11/1ib/scoped_models/mix_model. dart 
void selectNews(String newsId) { // 选中 资讯 方法 
_selectedNewsId = newsId; // 设置 选中 资讯 id 
} 
把 获取 资讯 索引 的 方法 selectedIndex 改 成 selectedNewsId, 代 码 如 下 : 
// chapter12/12 - 11/1ib/scoped models/mix model. dart 
Sal get selectedNewsId { // 获取 选中 的 资讯 id 
return _selectedNewsId; // 返回 选中 的 资讯 id 
} 
获取 选择 的 资讯 实体 方法 selectedNews, 也 需要 通过 资讯 id 返回 实体 ,代码 如 下 : 
// Chapter12/12 - 11/1ib/scoped_models/mix_model. dart 


NewsModel get selectedNews { // 获取 选中 资讯 实体 


if (_selectedNewsId == null) { // 判断 是 否 选中 资讯 
return null; // 没有 选中 返回 nul1 

} 

return _news. firstWhere( (NewsModel news){ // 返回 选中 资讯 实体 
return news. id == _selectedNewsId; // 通过 资讯 id 判断 


D); 
} 


我 们 通过 列表 中 的 firstWhere() 方 法 ,选择 第 一 个 满足 条 件 的 资讯 news 并 返回 ,条 件 
是 资讯 列表 中 的 id 和 选中 资讯 的 id 相同 。firstWhere() 方 法 会 遍历 列表 中 的 所 有 记录 , 直 
到 第 一 次 返回 true 为 止 。 第 一 次 返回 true 的 这 条 记录 就 会 被 返回 ,这 样 就 根据 选中 的 资讯 
id_selectedNewsId 获得 了 对 应 的 资讯 news。 

在 我 们 更 新 资讯 news 的 时 候 , 需 要 通过 数组 中 的 index, 找 到 需要 替换 的 资讯 news, 我 
们 可 以 通过 资讯 的 id 获得 这 条 资讯 在 数组 中 的 索引 。 代 码 如 下 : 


// chapter12/12 - 11/1ib/scoped_models/mix_model. dart 


final int selectedIndex = // 选中 的 资讯 索引 
_news. indexWhere( ( (NewsModel news) { // 查找 资讯 索引 
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return news. id == _selectedNewsId; // 返回 满足 条 件 索 引 
}))7 
_news[ selectedIndex] = updateNews; // 更 新 索引 对 应 记录 
_selectedNewsId = null; // 重 置 选中 资讯 id 


然后 把 mix_ model. dart 文件 和 其 他 页 面 中 所 使 用 的 _ selectedIndex 都 替换 成 
_selectedNewsId。 在 main. dart 中 的 详情 页 导航 这 里 ,我们 设置 好 选中 的 资讯 news 后 , 需 
要 在 导航 成 功 后 把 选中 的 资讯 news 重 置 。 可 以 在 mix_model. dart 中 新 建 一 个 重 置 选中 
资讯 的 方法 ,代码 如 下 : 


// chapter12/12 - 11/1ib/scoped models/mix_model. dart 


void resetSelectedNews(){ // 重 置 选中 记录 方法 
_selectedNewsId = null; // 重 置 选中 资讯 id 
} 


然后 在 资讯 详情 页 NewsDetailPage 的 ScopedModelDescendant 中 ,在 单 击 返 回 按钮 时 
调用 resetSelectedNews() 方 法 。 
这 样 我 们 就 通过 使 用 资讯 id 的 方式 来 获取 数据 和 更 新 数据 了 。 


12.12 处 理 HTTP 响应 错误 


我 们 还 需要 解决 几 个 可 能 存在 的 问题 ,在 获取 数据 和 发 送 数据 的 时 候 , 请 求 可 能 会 失 
败 , 例 如 没有 网 络 、 服 务 器 宕 机 发送 了 错误 格式 的 数据 等 ,这 些 错 误 需要 我 们 人 为 处 理 。 

在 mix_model. dart 文件 中 ,如 果 添 加 资讯 的 方法 addNews 发 送 了 错误 的 数据 ,服务 器 
将 返回 错误 的 信息 ,我 们 可 以 根据 状态 码 进行 过 滤 。 首 先 设置 新 增资 讯 的 返回 值 为 Future 
<bool>, 如 果 状 态 码 返回 的 是 200 或 201 表示 成 功 , 我 们 继续 执行 下 面 代码 ,并 返回 true。 
代码 如 下 : 


// Chapter12/12 - 12/1ib/scoped_models/mix_model. dart 


return http 
.post( 'http://localhost:6379/news - api/addNews'，body: newsData) // 发 送 POST 请 求 
.then( (http. Response response) { // 响应 结果 


if (response. statusCode == 200 | | response. statusCode == 201) { 
// 如 果 响 应 状态 码 返 回 200 或 201 
_isLoading = false; // 隐藏 加 载 条 
notifyListeners(); // 刷新 页 面 scope model 
return true; 
} 
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但 如 果 返 回 的 状态 码 不 是 200 和 201 ,那么 返回 false, 代 码 如 下 : 


// chapter12/12 - 12/1ib/scoped_models/mix_model. dart 


if(response. statusCode != 200 &&response. statusCode != 201){ 


_isLoading = false; // 隐藏 加 载 条 
notifyListeners(); // 更 新 页 面 scope model 
return false; // 返回 false 


} 


在 编辑 资讯 页 面 EditNewsPage 中 ,调用 addNews() 方 法 返回 后 ,调用 then() 方 法 , 参 
数 是 bool 类 型 ,代码 如 下 : 


// Chapter12/12 - 12/1ib/scoped models/mix model. dart 


model 


.addNews(title, description, score, 'assets/newsl. jpg') 
.then( (bool isSuccess) { // 调用 添加 资讯 方法 
if (isSuccess) { // 调用 成 功 
Navigator. pushReplacementNamed( context, '/home'); 
} else{ // 调用 异常 
showDialog(context: context, builder: (BuildContext context) { 
return AlertDialog( // 弹出 对 话 框 
title: Text( ' 提 示 ')， // 对 话 框 标题 
content: Text( ' 服 务 端 出 错 ')， // 对 话 框 内 容 


actions: <Widget >[ 
RaisedButton(child: Text( ' 确 认 '),onPressed: (){ 
Navigator. of (context). pop( ); // 对 话 框 单 击 事件 
},) 


这 样 我 们 就 处 理 了 HTTP 请 求 过 程 中 可 能 出 现 的 异常 情况 。 在 mix_model. dart 文件 
中 添加 资讯 addNews() 后 调用 then() 方 法 的 后 面 可 以 调用 catchError 方法 ,代码 如 下 : 


.catchError( (error){}) // 处 理 其 他 异常 
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12.13 使 用 async 和 await 


上 节 我 们 通过 then 〇 方法 获取 返回 的 结果 ,这 是 一 种 链条 方式 。Dart 语言 还 提供 了 其 
他 的 实现 方式 。 我 们 可 以 在 异步 的 方法 中 添加 async 关键 字 , 把 async 添加 到 方法 体 和 参 
数 之 间 。 代 码 如 下 : 


// Chapter12/12 - 13/1ib/scoped_models/mix_model. dart 
Future < bool > addNews( String title, Stringdescription, doublescore, String image, ) async {…} 


// 添加 资讯 异步 方法 


async 关键 字 表 明 这 个 方法 中 有 异步 调用 。 在 这 个 异步 方法 中 ,可 以 使 用 另外 一 个 关 
键 字 来 替换 then ,把 return 替换 成 await, 这 样 就 好 像 在 这 里 添加 了 同步 方法 一 样 ,会 等 到 
await 执行 完成 后 再 继续 执行 下 面 的 代码 。await 会 返回 then 中 的 返回 值 ,所 以 这 里 不 需要 
使 用 then() 方 法 ,把 then() 方 法 删除 。 代 码 如 下 : 


// Chapter12/12 - 13/1ib/scoped models/mix model. dart 


_isLoading = true; // 加 载 条 状态 


notifyListeners(); // 刷新 页 面 scope model 
final http. Responseresponse = await http // 返回 响应 结果 


.post( 'http://localhost:6379/news - api/addNews', body: newsData); 


这 样 就 把 响应 的 值 保存 到 response 变量 中 了 。post() 方 法 判断 状态 码 的 代码 会 在 
await 执行 结束 后 才 调用 。 检 查 响 应 的 状态 码 后 可 以 返回 true 或 false。 使 用 async 表示 这 
个 方法 是 Future 类 型 ,方法 中 返回 的 true 或 false 会 被 Future 包装 。 这 样 我 们 就 用 另外 一 
种 方式 重 构 了 实现 then() 方 法 功能 的 代码 。 

处 理 异常 需要 使 用 Dart 语言 提供 的 try catch 语句 。try 中 包含 需要 执行 的 代码 ,如 果 
执行 过 程 失败 ,就 会 调用 catch 捕获 任何 错误 。 代 码 如 下 : 


// Chapter12/12 - 13/1ib/scoped models/mix model. dart 


try{ // 需要 执行 的 代码 

} catch (error) { // 处 理 异 常 的 代码 
_isLoading = false; // 隐藏 加 载 条 

notifyListeners(); // 刷新 scope model 
return false; // 返回 false 


} 


以 上 是 async 和 await 的 使 用 方式 , 它 的 功能 和 使 用 then() 方 法 是 等 效 的 。 
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12.14 总 结 


本 章 我 们 使 用 了 http 包 , 然 后 发 送 各 种 请 求 到 服务 器 端 ,我 们 也 可 以 在 小 部 件 内 部 发 
送 请 求 。 本 章 使 用 的 是 scope model 集中 管理 数据 。http 包 发 送 的 请 求 是 异步 的 ,这 意味 
着 请 求 方法 不 会 被 立即 执行 完 ,调用 异步 方法 的 下 一 行 代码 会 立即 执行 ,因为 异步 方法 不 会 
阻塞 代码 继续 向 下 执行 。http 包 发 送 请 求 的 响应 结果 不 会 立即 返回 ,http 包 发 送 请 求 返 回 
值 都 是 Future 类 型 ,可 以 使 用 then 获取 响应 结果 ,使 用 catchError 处 理 异 常数 据 , 或 者 使 
用 async 和 await 的 方式 获取 数据 ,使 用 try catch 捕获 异常 。 响 应 的 数据 一 般 是 JSON 格 
式 , 我 们 可 以 使 用 Dart 语言 中 的 convert 把 JSON 格式 转化 成 Map 类 型 的 数据 。 在 使 用 
scope model 的 时 候 , 不 要 忘 了 调用 notifyListeners() 方 法 。 


权限 认证 


上 一 章 我 们 学 习 了 使 用 HTTP 向 服务 器 端 发 送 数据 并 与 后 端 交互 , 绝 大 多 数 应 用 需要 
与 后 端 交互 。 用 户 权 限 是 经 常 使 用 的 ,例如 用 户 登 录 和 注册 。 本 章 我 们 学 习 创 建 用 户 及 管 
理 用 户 的 权限 数据 ,还 会 学 习 如 何 实现 资讯 的 收藏 功能 。 


13.1 Flutter 中 如 何 使 用 权限 


Flutter 中 的 权限 认证 采用 如 图 13. 1 所 示 的 模式 。 


访问 受 保护 的 资源 


服务 器 端 无 状态 RESTful API 


token 


权限 认证 


Flutter 应 用 | 一 本 地 存储 


图 13.1 Flutter 中 的 权限 认证 


在 服务 器 端 存储 用 户 数据 可 以 使 用 图 中 服务 器 端 提供 的 接口 实现 用 户 的 权限 认证 ,用 
户 的 用 户 名 和 密码 可 以 通过 服务 器 端的 接口 认证 有 效 性 。 当 用 户 发 起 权限 认证 请 求 时 ,用 
户 的 用 户 名 和 密码 就 会 发 送 到 服务 器 端 ,然后 服务 器 端 返回 一 个 响应 ,如 果 用 户 名 存在 并 且 
密码 正确 将 会 被 授权 。 有 相关 Web 开发 经 验 的 读者 ,可 能 会 了 解 Session 的 概念 。Session 
表示 在 服务 器 上 保存 了 一 个 用 户 的 信息 ,登录 成 功 后 服务 器 端 把 Session 的 密 钥 再 发 送 给 
客户 端 。Flutter 应 用 的 权限 认证 使 用 的 是 token 方式 。 因 为 服务 器 端 提供 的 是 无 状态 的 
API, 表 示 服 务 器 端 对 Flutter 的 应 用 是 无 感知 的 ,服务 器 端 只 是 提供 接口 ,而 用 户 可 以 发 送 
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认证 数据 给 服务 器 端 ,如 果 通 过 认证 ,服务 器 端 就 会 返回 响应 的 结果 。 服 务 器 端 不 会 给 客户 
端 发 送 任 何 Session 信息 。 

token 是 一 个 很 长 的 字符 串 , 它 是 使 用 算法 生成 的 。 如 果 一 些 额 外 的 数据 加 到 了 token 
中 ,token 只 能 通过 服务 器 端 进行 认证 。 可 以 把 token 保存 在 移动 设备 上 , 当 用 户 关闭 App， 
然后 再 打开 App 时 ,获取 到 token 即 表明 这 个 用 户 已 被 认证 。 

可 以 使 用 token 来 控制 App 中 的 访问 权限 ,例如 可 以 访问 哪些 页 面 ,不 可 以 获取 哪些 
资源 。 我 们 需要 附加 token 来 访问 服务 器 端 受 保护 的 资源 ,因为 不 是 所 有 人 都 能 获取 数据 
和 写 数据 。 服 务 器 通过 算法 创建 了 token,token 也 会 被 服务 器 端 认证 。 


13.2 确认 密码 文本 框 

本 节 学 习 给 应 用 添加 认证 ,在 auth. dart 文件 中 ,有 两 个 TextField 文本 框 ,分 别 是 用 户 
名 和 密码 。 要 实现 用 户 注 册 , 还 需要 一 个 确认 密码 的 TextField 文本 框 。 代 码 如 下 : 

// Chapter13/13 - 02/1ib/pages/auth. dart 


TextFieldbuildConfirmTextField() { // 确认 密码 文本 框 


return TextField( // 文本 框 
obscureText: true, // 隐藏 显示 
decoration: InputDecoration( // 修饰 文本 框 
labelText: ' 确 认 '， // 文本 标签 
filled: true, fillColor: Colors. white), // 背景 填充 


) 
} 


因为 文本 框 只 是 与 之 前 的 密码 比 对 ,所 以 我 们 需要 能 够 访问 密码 文本 框 输入 的 内 容 。 
TextField 中 参数 controller 管理 用 户 的 输入 ,如 果 不 设置 controller 参数 ,默认 会 自动 创 
建 。 我 们 也 可 以 自 定义 一 个 Controller,Controller 可 以 设 为 全 局 变量 ,或 者 设 为 类 中 的 一 
个 属性 。 

这 里 将 Controller 设置 为 final 的 属性 ,类 型 是 TextEditingController ,代码 如 下 : 

final TextEditingController _passwordController 

= TextEditingController(); // 创 建 密码 文本 框 的 Controller 

在 密码 的 TextField 中 ,配置 参数 controller, controller 的 值 是 _passwordController。 
这 样 密码 文本 框 使 用 自 定义 的 Controller。_passwordController 保存 着 密码 文本 框 中 的 文 
本 ,每 当 密 码 TextField 中 的 文本 更 新 时 ，passwordController 中 的 值 也 会 更 新 。 

首先 把 登录 页 面 中 的 TextField 都 改 成 TextFormField ,然后 在 buildConfirmTextField 〇 方 
法 中 添加 配置 参数 validator, 代 码 如 下 : 


// Chapter13/13 - 02/1ib/pages/auth. dart 
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validator: (String value){ // 验证 确认 密码 是 否 正确 


if(_passwordController. text != value){ // 两 次 密码 不 一 致 
return ' 两 次 密码 输入 不 一 致 '; // 错误 提示 信息 

} 
return null; // 验证 通过 


}, 


显示 效果 如 图 13. 2 所 示 。 


图 13.2 确认 密码 


现在 我 们 添加 一 个 开关 切换 页 面 显示 模式 ,首先 定义 一 个 枚 举 , 枚 举 是 Dart 语言 中 的 
一 个 特性 。 枚 举 是 一 种 数据 类 型 ,可 以 使 用 枚 举 中 有 限 的 值 。 代 码 如 下 : 

enumAuthMode{ 

Singup, Login 

} 

接 下 来 就 可 以 使 用 枚 举 添加 一 个 属性 了 ,代码 如 下 : 

RuthMode _authMode = RuthMode.Login // 设 置 枚 举 中 的 值 Login 

在 登录 按钮 上 面 添加 一 个 FlatButton 按钮 ,代码 如 下 : 


// Chapter13/13 - 02/1ib/pages/auth. dart 
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FlatButton( // 页 面 切 换 模式 按钮 


child: Text( // 显示 的 文本 
' 切 换 到 $ {_authMode == AuthMode. Login ? ' 注 册 ' : ' 登 录 '}')， 
onPressed: () { // 按钮 单 击 事件 
setState(() { // 刷新 页 面 
_authMode == AuthMode.Login // 切换 页 面 模式 


? _authMode = RuthMode. Singup 
: _authMode = AuthMode. Login; 
DD); 
}, 

), 


现在 需要 根据 页 面 的 模式 控制 确认 密码 的 显示 ,代码 如 下 : 


// Chapter13/13 - 02/1ib/pages/auth. dart 
_authMode == RuthMode.Login ? 
Container() :buildConfirmTextField()， // 根据 页 面 模式 显示 确认 密码 


13.3 用户 注册 


用 户 注册 的 UI 已 经 实现 了 ,下 一 步 需要 通过 服务 器 端 提 供 的 注册 用 户 接口 创建 一 个 
新 用 户 ,接口 说 明 如 图 13. 3 所 示 。 

在 mix_model. dart 文件 中 ,我 们 在 UserScopeModel 类 中 添加 一 个 方法 ,返回 值 为 
Future 类 型 ,代码 如 下 : 


// Chapter13/13 - 03/1ib/scoped_models/mix_model. dart 


Future < Map < String, dynamic >> signup(String userName, String password) {  // 用 户 注册 方法 


Map < String, dynamic > formData // 发 送 的 数据 
= {'email': userName, 'password': password}; 
return http // 发 送 请 求 


.post( 'http://localhost:6379/news - api/signup', 
body: formData) 
.then( (http. Response response) { // 请 求 响 应 结果 
Map < String, dynamic > result = {'success':true, 'message': ' 注 册 成 功 '}; 
return result; 


D; 


在 auth. dart 文件 中 ,登录 按钮 已 经 使 用 了 scope model, 系 统 可 以 通过 当前 的 页 面 模式 
判断 用 户 是 使 用 登录 方法 还 是 注册 方法 ,代码 如 下 : 
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Ee 


Response Class (Status 200) 
Model Schema 


"birthday": "string”, 
"email": "string", 
expiresIn": “string”, 


和 


Response Content Type| applcationlson $ 


Parameters 
Parameter Value Description 


email (required) email 


password [reauired password 


Response Messages 


HTTP Status Code = Reason Response Model 
261 Created 

461 Unauthorized 

403 Forbldden 

404 Not Found 

Ty toutt 


a 
a 
到 
本 接口 参数 
query string 

Be 


图 13.3 用 户 注册 接口 


// Chapter13/13 - 03/1ib/pages/auth. dart 


_authMode == AuthMode. Login 
? model. login(_username, _password) 
: model. signup(_username, _password); 


// 判断 当前 页 面 模式 
// 登录 模式 调用 登录 
// 注册 模式 调用 注册 


在 注册 成 功 之 后 才能 导航 到 主页 ,因为 model. signup() 方 法 返回 的 是 Future 类 型 ,所 
以 提交 表单 的 方法 可 以 使 用 异步 ,在 方法 体 和 参数 之 间 加 async。 代 码 如 下 : 


// chapter13/13 - 03/1ib/pages/auth. dart 


void submit(MainScopeModel model) async{ 
if (!_form. currentState. validate()) { 
return; 
} 
if(_authMode == AuthMode.Login){ 
model. login(_username, _password); 
}else{ 


// 方法 中 包含 异步 方法 
// 表单 验证 
// 不 通过 返回 


// 登录 模式 
// 调用 登录 方法 
// 注册 模式 


Map < String, dynamic > response = await model. signup(_username, _password); 


// 调用 注册 方法 
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if(response[ 'success']){ // 注册 成 功 
Navigator. pushReplacementNamed(context, '/home'); 
} // 跳 转 到 主页 
} 
这 样 我 们 就 实现 了 用 户 注册 功能 。 


13.4 处 理 注 册 过 程 中 的 异常 


注册 过 程 中 有 可 能 出 现 注册 失败 的 情况 。 首 先 在 mix_model. dart 中 ,把 注册 方法 的 响 
应 结果 打印 出 来 ,代码 如 下 : 
print(' 服 务 器 端 响应 结果 : $ {response. body} '); // 打 印 服务 器 端 响 应 结果 
后 使 用 同样 的 用 户 名 再 注册 一 次 ,在 控制 台 打 印 的 结果 如 下 : 


flutter: 服 务 器 端 响应 结果 

{" localId" : null," email": null," phone" : null," sex": null,"birthday": null," idToken": null," 

expiresIn" :null, "message" :"EMAIL EXISTS"} 

"message" :"EMAIL_EXISTS" 表 示 这 个 用 户 已 经 存在 了 。 首 先 我 们 把 响应 结果 转换 

成 Map 类 型 ,代码 如 下 : 

// 把 JSON 转换 成 Map 

Map < String, dynamic > responseData = json. decode(response. body); 

然后 就 可 以 根据 responseData 中 的 值 进行 判断 了 ,例如 responseData 中 的 id 如 果 不 为 
null, 就 表示 注册 成 功 。 代 码 如 下 : 


// hpkee /3 04/1ib/scoped_ models/mix_model. dart 


Map < String, dynamic > responseData = json. decode(response. body); 


Map < String, dynamic > result; // 返回 结果 
var message = ' 注 册 成 功 '; // 返回 信息 
if(responseData[ 'id']!= null){ // 注册 成 功 


result = {'success':true, 'message':message}; 
} 
if(responseData[ 'message'] == 'EMAIL EXISTS'){ 
// 用 户 已 存在 
result = {'success':false, 'message':' 用 户 已 存在 '}; 
} 


return result; // 返回 结果 


var 关键 字 表示 不 明确 设置 类 型 。Dart 会 根据 所 赋 的 值 推断 它 的 类 型 。 在 auth. dart 文 
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件 中 ,可 以 判断 是 否 注册 成 功 , 如 果 注 册 失 败 需 要 弹出 一 个 对 话 框 ,显示 的 内 容 为 注册 方法 
返回 的 消息 ,代码 如 下 : 


// chapter13/13 - 04/1ib/scoped models/mix model. dart 


if (response[ 'success']) { // 注册 成 功 


Navigator. pushReplacementNamed (context, '/home'); // 跳 转 主页 

Jelse{ // 注册 失败 
showDialog(context: context, // 对 话 框 

builder: (BuildContextcontext){ 

return AlertDialog( // 提示 信息 

title: Text(' 提 示 信 息 ')， // 提示 标题 

content: Text(response[ 'message']), // 提示 内 容 

actions: < Widget >[RaisedButton(child: Text( "确认 ')， // 提示 操作 

onPressed: (){ // 单 击 事件 

Navigator. of (context). pop( ); // 关闭 窗口 


}，)]， 
) 
D; 
} 


保存 后 ,注册 一 个 已 存在 的 用 户 ,会 弹出 一 个 对 话 框 ,如 图 13.4 所 示 。 


13.4 用 户 已 存在 的 提示 对 话 框 
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13.5 用户 注 册 加 载 条 


我 们 实现 了 注册 功能 ,在 auth. dart 文件 中 , 当 用 户 单 击 “ 注 册 ” 按 钮 后 ,需要 添加 一 个 
加 载 条 。 在 登录 页 面 中 的 RaisedButton 前 判断 _isLoading 属性 的 值 ,如 果 是 ture 显示 加 载 
条 ,否则 显示 按钮 。 代 码 如 下 : 


// Chapter13/13 - 05/1ib/pages/auth. dart 
model. isLoading?CircularProgressIndicator( ) :RaisedButton( … 
// 根据 加 载 状 态 显 示 内 容 


最 后 在 mix_model. dart 文件 的 注册 方法 中 ,加 上 _isLoading 的 逻辑 ,代码 如 下 : 


// Chapter13/13 - 05/1ib/scoped models/mix model. dart 


Future < Map < String, dynamic >> signup(String userName, String password) { // 用 户 注册 方法 
Map < String, dynamic > formData = {'email': userName, 'password': password}; 
// 发 送 到 服务 器 端的 数据 
_isLoading = true; // 加 载 状 态 设 为 true 
notifyListeners(); // 刷新 页 面 
return http. post( 'http://localhost:6379/news - api/signup', body: formData) 
// 向 服务 器 端 发 送 请 求 
.then( (http. Response response) { // 请 求 响 应 结果 
// print( "服务 端 响应 结果 : $ {response. body} '); 
Map < String，dynamic > responseData = json. decode(response. body) ; 


// 转换 响应 结果 
Map < String，dynamic > result; // 定义 返回 结果 
var message = ' 注 册 成 功 '; // 返回 的 消息 
if(responseData[ 'id']!= null){ // 注册 成 功 
result = 
{ "success' :true, 'message' :message}; // 成 功 消息 
} 
if(responseData[ 'message'] // 用 户 已 经 存在 
== 'EMAIL EXISTS'){ 
result = {'success':false, // 用 户 已 经 存在 的 信息 
'message': ' 用 户 已 存在 '}; 
} 
_isLoading = false; // 加 载 状态 设 为 false 
notifyListeners(); // 刷新 页 面 
return result; // 返回 结果 


D; 


保存 并 重新 注册 后 ,发 现 加 载 条 显示 出 来 了 ,如 图 13.5 所 示 。 
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13.5 注册 用 户 的 加 载 条 


13.6 用户 登 录 


已 注册 的 用 户 可 以 使 用 登录 的 功能 了 ,在 mix_model. dart 文件 中 ,登录 方法 login 使 用 
硬 编码 方式 实现 登录 功能 。 首 先 我 们 看 一 下 服务 器 端 提供 的 登录 接口 是 怎样 定义 的 ,如 
图 13.6 所 示 。 

登录 方法 login 需要 发 送 一 个 POST 请 求 , 代 码 如 下 : 


// Chapter13/13 - 06/1ib/scoped_models/mix_model. dart 


Future < Map < String, dynamic >> login(String userName, // 登录 方法 


String password) async { // 异步 方法 
Map < String，dynamic > formData 

= {'email': userName，'password': password}; // 请 求 数据 
_isLoading = true; // 加 载 条 

notifyListeners(); // 刷新 页 面 

http. Response response // 发 送 请求 

= await http 


.post( 'http://localhost:6379/news - api/login, 
body: formData); 
Map < String, dynamic > responseData // 响应 结果 


/news-api/login userLogin 


Response Class (Status 200) 
Model Schema 


Response Content Type | application/json $ 


Parameters 

Parameter Value Parameter Type Data Type 
enail required) query string 
password {reqvired) query string 


Response Messages 


HTTP Status Code Reason Response Model Headers 
201 Created 

401 Unauthorized 

403 Forbidden 

404 Not Found 


Try Kt outt 


13.6 服务 器 端 用 户 登 录 接口 


= json. decode(response. body); 


Map < String, dynamic > result; // 返回 内 容 
var message = ' 登 录 成 功 '; // 提示 消息 
if (responseData[ 'localId'] != null) { // 登录 成 功 
result = {'success': true, 'message': message}; 
} 
if (responseData[ 'message'] == 'EMAIL_NOT_ FOUND') { // 用 户 不 存在 
result = {'success': false，'message': ' 不 存在 这 个 用 户 '}; 
} 
if (responseData[ 'message'] == 'INVALID PASSWORD') { // 密码 不 正确 
result = {'success': false，'message': ' 密 码 不 正确 '}; 
} 
_isLoading = false; // 隐藏 加 载 条 
notifyListeners(); // 刷新 页 面 
return result; // 返回 结果 


在 auth. dart 文件 中 ,调用 登录 的 方法 后 ,需要 处 理 获取 的 返回 信息 。 代 码 如 下 : 


// chapter13/13 - 06/1ib/pages/auth. dart 


void submit(MainScopeModel model) async { 
证 (!_form. currentState.validate()) { 
return; 
} 
_form. currentState. save( ); 
Map < String, dynamic > response; 
if (_authMode == AuthMode.Login) { 


response = await model.login(_username, password); 


} elsel{ 


response = await model. signup(_username, password); 


} 
if (response[ 'success']) { 
Navigator. pushReplacementNamed( context, '/home'); 


} else{ 
showDialog( 
Context: context, 
builder: (BuildContext context) { 
return AlertDialog( 
title: Text( ' 提 示 信 息 ')， 
content: Text(response[ 'message']), 
actions: < Widget >[ 
RaisedButton( 
child: Text(' 确 认 ')， 
onPressed: () { 
Navigator. of (context). pop( ); 
}, 


这 样 我 们 就 实现 了 用 户 登录 的 功能 。 


13.7 访问 受 保护 资源 
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// 提交 按钮 方法 
// 验证 表单 
// 不 通过 返回 


// 保存 表单 
// 请 求 响应 结果 
// 登录 模式 


// 调用 登录 方法 
// 注册 模式 


// 调用 注册 方法 
// 操作 成 功 


// 跳 转 到 主页 
// 操作 失败 

// 弹出 对 话 框 
ZA. 上下文 

// 构建 方法 

// 提示 框 

// 提示 框 标题 
// 提示 框 内 容 
// 提示 框 操作 
// 有 背景 色 按钮 
// 按钮 上 的 文字 
// 按钮 单 击 事件 
// 关闭 对 话 框 


现在 可 以 注册 用 户 并 且 能 够 登录 了 .但 是 我 们 没有 使 用 token。 服 务 器 端 可 以 将 一 些 


资源 限制 访问 ,我 们 可 以 改变 服务 器 端 接口 的 访问 规则 ,只 允许 认证 的 用 户 访问 资源 ,用 户 
登录 成 功 后 ,服务 器 端 会 返回 token, 如 图 13.7 所 示 。 
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Request URL 


http://localhost:6379/news-api/ login?email=85password=8 


Response Body 


{ 
"localId": "29", 


13.7 服务 器 端 返回 的 token 


这 样 我 们 就 可 以 登录 并 获取 token 了 ,同时 我 们 需要 把 token 附加 在 请 求 中 ,告诉 服务 
器 端 我 们 是 通过 认证 的 用 户 。 首 先 需要 把 token 保存 到 应 用 的 内 存 或 者 移动 设备 中 , 当 通 
过 验证 后 再 保存 token 信息 。 我 们 不 仅 需要 把 这 个 token 以 某 种 方式 保存 下 来 ,还 需要 创 
建 一 个 认证 的 用 户 ,在 news_model. dart 中 ,需要 给 UserModel 类 添加 属性 token, 代 码 如 


下 所 示 : 

final String token; // 保 存 用 户 的 token 

在 mix_model. dart 文件 的 登录 方法 中 ,如 果 登 录 成 功 , 则 创建 一 个 新 的 用 户 对 象 ,代码 
如 下 : 


// Chapter13/13 - 07/1ib/scoped models/mix model. dart 


_user = UserModel( // 创建 登录 用 户 对 象 
id: responseData[ 'localId']， // 用 户 id 

userName: userName, // 用 户 的 用 户 名 
password: password, // 用 户 的 密码 
token: responseData[ 'idToken']); // 用 户 的 token 


注册 成 功 后 ,也 需要 以 同样 的 方式 创建 用 户 对 象 ,下 一 步 要 在 请 求 受 保护 的 资源 中 添加 
token。 例 如 在 获取 资讯 列表 中 ,添加 token。 代 码 如 下 : 


// Chapter13/13 - 07/1ib/scoped models/mix model. dart 
http. get( 'http://localhost:6379/news - api/allNewsList?token = $ {_user. token}') 


// 在 请 求 资讯 列表 中 添加 token 
.then( (http. Response response) { 


保存 并 重启 应 用 后 ,如 果 用 户 登录 成 功 就 会 获取 资讯 列表 数据 ,如 图 13. 8 所 示 。 
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资讯 列表 


3333333 


一 一 一 一 


图 13.8 登录 成 功 的 资讯 列表 页 面 


13.8 存储 token 


我 们 已 经 从 服务 器 获取 了 token, 但 每 当 重启 应 用 后 ,或 者 在 设备 上 关闭 App, 然 后 重 
新 打开 App 时 ,都 会 显示 登录 页 面 , 通 常 如 果 登 录 成 功 ,用 户 的 成 功 登 录 状 态 会 被 保存 一 段 
时 间 ,这 意味 着 需要 把 token 保存 在 设备 上 。 当 启动 App 后 ,首先 验证 设备 上 是 否 存在 一 
个 合法 的 token, 如 果 存 在 合法 的 token,App 能 够 自动 登录 并 导航 到 资讯 列表 页 面 。 

首先 ,保存 用 户 的 token, 需 要 引入 一 个 第 三 方 包 shared_preferences, 如 图 13.9 所 示 。 

shared_preferences 可 以 访问 本 地 的 存储 ,iOS 和 Android 都 可 以 使 用 此 包 , shared_ 
preferences 根据 运行 的 平台 选择 正确 的 存储 。shared_preferences 允许 保存 简单 的 数据 , 例 
如 简单 的 键 值 对 。 我 们 这 里 需要 保存 的 用 户 token 就 可 以 使 用 shared_preferences 实现 。 

首先 安装 shared_preferences ,在 pubspec. yaml 中 添加 依赖 ,代码 如 下 : 


shared_preferences: ^0.5.3+4 // 安装 shared_preferences 


保存 pubspec. yaml 后 ,IDE 会 自动 下 载 shared_preferences。 安 装 好 后 就 可 以 使 用 它 
了 ,使 用 方式 非常 简单 。mix_model. dart 文件 中 保存 着 整个 应 用 的 数据 。 首 先 需 要 引入 包 
shared_preferences, 代 码 如 下 : 
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Getting Started 


Flutter Web & Server 


shared_preferences 0.5.3+4 


Published Jul 16 FLUTTER 


Readme 


Shared preferences plugin 


Wraps NSUserDefaults (on i0S) and SharedPreferences (on Android), providing a persistent 
store for simple data Data is persisted to disk asynchronously Neither platform can 
guarantee that writes will be persisted to disk after returning and this plugin must not be 
used for storing critical data 


About 

Flutter plugin for reading and writing 
simple keyvalue pairs. Wraps 
NSUserDefaults on iOS and 
SharedPreferences on Androld 

Hom 
Rep 


ge 
ory (GitHub) 


View/report Issues 


13.9 第 三 方 包 shared_preferences 


import 'package: shared_preferences/shared_preferences. dart'; 
// 引 


人 shared_preferences 


在 用 户 登 录 成 功 后 ,我 们 创建 了 这 个 用 户 ,并 给 MixModel 中 的 _user 赋值 了 这 个 登录 
用 户 对 象 。 保 存 登录 用 户 后 ,需要 保存 token, 我 们 使 用 SharedPreferences. getInstance() 获 
得 一 个 实例 对 象 ,getInstance() 方 法 是 异步 方法 ,因为 登录 方法 使 用 了 async, 所 以 可 以 用 


await 关键 字 获 取 返 回 的 结果 。 代 码 如 下 : 


// Chapter13/13 - 08/1ib/scoped_models/mix_model. dart 


SharedPreferencessharedPreferences // 创 


await SharedPreferences. getInstance( ); 


建 shared_preferences 


sharedPreferences 对 象 允许 我 们 和 本 地 存储 交互 ,可 以 通过 setString() 方 法 添加 值 ， 


代码 如 下 : 


// Chapter13/13 - 08/1ib/scoped_models/mix_model. dart 


sharedPreferences. setString( 'token', _user. token); A/ 保 


SharedPreferences 还 可 以 设置 为 bool 类 型 或 者 整 型 ,我们 的 


的 名 字 可 以 自 定义 ,这 里 命名 为 token,value 是 登录 用 户 的 token， 


到 移动 设备 上 了 ,而 不 是 存放 在 内 存 中 。 


存 token 


token 是 String 类 型 ,key 
这 样 我 们 就 把 token 保存 


在 main. dart 文件 中 ,我 们 需要 调用 某 个 方法 时 先 检查 是 否 存在 一 个 合法 的 token。 可 


以 在 _MyappState 类 的 initState() 方 法 中 添加 验证 ,因为 当 App 
initState() 方 法 ,而且 initState() 方 法 只 执行 一 次 .所 以 在 initStat 


启动 时 ,首先 执行 的 就 是 
e() 方 法 里 验证 token。 


在 mix_model. dart 中 添加 一 个 方法 autoAuthenticate() ,返回 值 为 空 ,代码 如 下 : 
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// Chapter13/13 - 08/1ib/scoped models/mix model. dart 
void autoAuthenticate( )async{ } // 自动 验证 方法 
方法 中 需要 使 用 SharedPreferences, 所 以 需要 加 上 async 关键 字 。 因 为 我 们 需要 调用 


SharedPreferences. getInstance() 方 法 获得 对 象 ,这 个 过 程 是 异步 的 ,所 以 autoAuthenticate() 方 
法 使 用 了 async 关键 字 。 这 样 我 们 就 可 以 验证 设备 中 是 否 已 保存 了 token ,代码 如 下 : 


// Chapter13/13 - 08/1ib/scoped models/mix model. dart 


SharedPreferencessharedPreferences 


= await SharedPreferences. getInstance( ); // 获取 SharedPreferences 对 象 
String token 

= sharedPreferences. getString( 'token'); // 获取 存储 在 设备 中 的 token 

if(token != null){ // 如 果 token 不 为 空 


} 


如 果 token 不 为 空 , 需 要 创建 一 个 认证 的 用 户 , 这 样 我 们 还 需要 获取 用 户 名 和 用 户 id 
的 值 ,所 以 在 用 户 登录 成 功 后 需要 存储 更 多 的 值 ,下 一 节 我 们 实现 这 个 功能 。 


13.9 自动 登录 


我 们 存储 了 用 户 的 token, 还 需 存 储 用 户 名 和 用 户 id, 这 样 就 能 通过 存储 的 数据 创建 一 
个 用 户 了 。 首 先 在 登录 或 注册 成 功 时 存储 用 户 名 和 用 户 id, 代 码 如 下 : 


// Chapter13/13 - 09/1ib/scoped_models/mix_model. dart 


sharedPreferences. setString( 'userName'，_user. userName);  // 用 户 名 
sharedPreferences. setString( 'userId', _user. id); // 用 户 id 


然后 在 mix_model. dart 的 autoAuthenticate() 方 法 中 ,获取 用 户 名 、 用 户 id 创建 用 户 。 
代码 如 下 : 


// Chapter13/13 - 09/1ib/scoped models/mix model. dart 


String token 


= sharedPreferences. getString( 'token'); // 用 户 的 token 
String id 

= sharedPreferences. getString( 'userId'); // 用 户 的 id 
String userName 

= sharedPreferences. getString( 'userName'); // 用 户 名 


if(token != null){ // token 不 为 空 
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_user 
= UserModel(id: id, 

userName: userName, token: token); // 创建 认证 的 用 户 
notifyListeners( ); // 刷新 页 面 


在 main. dart 文件 的 initState() 方 法 中 ,调用 自动 认证 方法 ,代码 如 下 : 


_model. autoAuthenticate( ); // 调 用 自动 认证 方法 


最 后 把 MaterialApp 用 ScopedModelDescendant 包装 ,在 ScopedModelDescendant 的 
builder() 方 法 中 判断 MixModel 中 的 _user 是 否 为 空 ,如 果 为 空 , 跳 转 登录 页 面 ,如 果 不 为 
空 , 跳 转 到 首页 。 代 码 如 下 : 


// Chapter13/13 - 09/1ib/main. dart 


ScopedModelDescendant < MainScopeModel >( // 使 用 Scoped Model 
builder: (BuildContext context, // builder() 方 法 
Widget child, MainScopeModel model) { 
return MaterialApp( // 返回 根 小 部 件 
theme: ThemeData( // 应 用 主题 
primaryColor: Colors. deepOrange, // 主题 颜色 
accentColor: Colors. deepOrange, // 强调 颜色 
brightness: Brightness. light, // 主题 模式 
), 
routes: { // 命名 路 径 
/admin': (context) { // 资讯 管理 路 径 
return ManageNews(_model) ; // 资讯 管理 页 面 
}, 
'/home': (context) { // 资讯 列表 路 径 
return NewsListPage(_model); // 资讯 列表 页 面 
}, 
'/': (context) { // 主页 
return model. user // 判断 当前 用 户 是 否 为 空 
== nul1?RuthPage() // 为 空 跳 转 到 登录 页 面 
:NewsListPage(_model); // 不 为 空 跳 转 到 主页 


} 
}, 


登录 成 功 后 再 重启 应 用 ,会 自动 进入 资讯 列表 页 面 。 


13.10 用 户 退 出 


在 资讯 列表 页 面 NewsListPage 中 ,我们 给 抽 屋 式 导 航 Drawer 添加 一 个 ListTile。 资 
讯 管理 页 面 ManageNews 也 有 一 个 抽 层 式 导航 ,所 以 我 们 把 退出 的 ListTile 作为 一 个 小 部 
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件 来 封装 一 下 。 在 目录 ui_element 中 新 建 logout. dart 文件 ,首先 引入 material 包 , 然 后 创 
建 Logout 类 继承 StatelessWidget。 代 码 如 下 : 


// Chapter13/13 - 10/1ib/widgets/ui_element/logout. dart 


class Logout extends StatelessWidget { // 退出 小 部 件 
@override 
Widget build(BuildContext context) { // 覆盖 build() 
return ScopedModelDescendant < MainScope Model >( // 使 用 Scoped Model 
builder: // 创建 builder() 方 法 
(BuildContext context, Widget child, MainScopeModel model) { 
return ListTile( // 返回 ListTitle 小 部 件 
title: Text(' 退 出 ')， // ListTitle 上 的 标题 
onTap: () { // ListTitle 单 击 事件 


单 击 事件 中 需要 调用 model 中 的 方法 ,但 这 个 方法 还 没 添加 ,所 以 在 mix_model. dart 
中 添加 用 户 退 出 方法 。 代 码 如 下 : 


// Chapter13/13 - 10/1ib/scoped_models/mix_model. dart 


void logout() async{ 
SharedPreferencessharedPreferences 


= await SharedPreferences. getInstance(); // 获取 本 地 存储 

sharedPreferences. clear(); // 清除 本 地 缓存 

_user = null; // 设置 用 户 为 空 
notifyListeners(); // 刷新 页 面 


} 


SharedPreferences 的 clear() 方 法 会 清除 所 有 的 内 容 , 也 可 以 调用 remove() 方 法 清除 
指定 key 的 内 容 。 在 Logout 小 部 件 的 单 击 事件 方法 中 ,需要 调用 model 中 的 logout() 方 
法 ,然后 在 资讯 列表 页 面 和 管理 资讯 列表 页 面 中 添加 Logout 小 部 件 。 

在 Logout 小 部 件 退 出 后 需要 导航 到 主页 ,代码 如 下 所 示 : 


// Chapter13/13 - 10/1ib/widgets/ui_element/logout. dart 


model. logout(); // 用 户 退 出 
Navigator. pushReplacementNamed( context, '/'); // 跳 转 到 主页 
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13.11 自动 退出 


服务 器 端 提供 的 登录 接口 中 有 过 期 时 间 的 参数 ,如 图 13. 10 所 示 。 


Request URL 


http://localhost:6379/news-api/ login?enail=85password=8 


Response Body 


{ 
"ocalId": "29", 


null, 


dd2869-c49c-4788-a77c-59d697e3lcbl"， 


Response Code 


200 


图 13.10 用 户 登录 接口 


过 期 时 间 表 示 当 用 户 成 功 登录 后 ,登录 时 间 超 过 指定 的 时 间 后 自动 退出 。 在 mix_ 
model. dart 文件 中 添加 方法 setTimeOut() ,在 这 个 方法 中 设置 一 个 有 效 期 ,登录 时 间 到 期 
后 自动 退出 。 方 法 中 传人 一 个 int 类 型 参数 ,表示 用 户 登 录 的 时 间 , 以 秒 为 单位 ,然后 使 用 
Dart 语言 提供 的 计时 器 Timer(Duration) 计 算 运 行 的 时 间 。 代 码 如 下 : 

// Chapter13/13 - 11/1ib/scoped models/mix model. dart 


void setTimeOut( int expiresTime){ // 设置 过 期 时 间 
Timer(Duration(seconds: expiresTime), (){ 


// 过 期 后 调用 的 方法 
D); 
} 


当 运 行 时 间 超 过 expiresTime 时 间 后 ,Dart 会 自动 调用 Timer 中 的 方法 。 这 里 我 们 可 

以 调用 logout() 方 法 。 这 个 时 间 应 该 是 用 户 登 录 成 功 后 设置 的 。 代 码 如 下 : 
setTimeOut( int. parse(responseData[ 'expiresIn'])); // 设 置 过 期 时 间 

如 果 这 样 设置 , 当 用 户 青 次 登录 或 者 重启 App 后 ,这 个 有 效 期 也 就 被 重新 设置 为 服务 

器 端 返回 的 时 间 , 所 以 我 们 需要 记录 过 期 的 时 间 点 ,并 存储 这 个 时 间 点 。 代 码 如 下 : 


// Chapter13/13 - 11/1ib/scoped_models/mix_model. dart 
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DateTime now = DateTime. now(); // 获取 当前 时 间 
DateTimeexpiryTime = now.add(Duration // 获取 过 期 时 间 


(seconds: int. parse(responseData[ 'expiresIn']))); 

sharedPreferences. setString( 

expiryTimePoint, expiryTime. toString( )); // 存储 过 期 时 间 点 
setTimeOut( int. parse(responseData[ 'expiresIn'])); // 过 期 自动 退出 


这 样 当 用 户 登 录 或 者 注册 成 功 后 便 存储 了 过 期 的 时 间 点 。 在 mix_model. dart 文件 中 ， 
当 用 户 认证 后 ,我 们 可 以 在 自动 认证 autoAuthenticate() 方 法 中 取 回 过 期 时 间 和 过 期 时 间 
点 的 数据 。 首 先 获取 过 期 时 间 点 数据 ,代码 如 下 : 


DateTimeexpiryTimePoint = // 自动 登录 获取 过 期 时 间 点 
DateTime. parse( sharedPreferences. getString( 'expiryTimePoint')); 


在 自动 登录 方法 中 检查 token 是 否 有 效 , 可 以 调用 expiryTimePoint. isBeforeCnow ) 确 
认 是 否 过 期 ,代码 如 下 : 


// chapter13/13 - 11/1ib/scoped_models/mix_model. dart 


DateTime now = DateTime. now(); // 当前 时 间 


if (token != null) { 


if (expiryTimePoint. isBefore(now)) { 


_user = null; 
notifyListeners(); 
return; 


} 


// 如 果 token 不 为 空 
// 如 果 token 过 期 
// 清空 用 户 

// 刷新 页 面 

// 返回 


如 果 用 户 的 token 没有 过 期 ,表明 用 户 的 token 还 在 有 效 期 内 ,但 是 需要 设置 token 有 


效 的 剩余 时 间 ,代码 如 下 : 


// Chapter13/13 - 11/1ib/scoped_models/mix_model. dart 


_user = 

UserModel (id: id, 

userName: userName, token: token); 
int tokenLeft = 


expiryTimePoint. difference(now). inSeconds; 


setTimeOut (tokenLeft); 
notifyListeners(); 


// 认证 的 用 户 


// token 剩余 时 间 
// 重新 设置 计时 器 
// 刷新 页 面 


在 MixModel 中 添加 Timer 类 型 的 属性 _authTimer, 在 setTimeOnut() 方 法 中 给 它 赋 


值 ,然后 在 退出 方法 中 调用 _authTimer. cancel(), 这 样 当 时 间 过 期 后 便 可 以 调用 退出 方 
法 5 
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13.12 自动 退出 跳 转 


上 一 节 token 有 效 时 间 到 期 后 ,自动 调用 了 退出 的 方法 ,但 是 退出 后 没有 直接 返回 到 登 
录 页 面 。 在 main. dart 文件 中 ,我 们 是 在 initState() 方 法 中 调用 了 autoAuthenticate() 方 
法 ,在 mix_model. dart 文件 中 ,autoAuthenticate() 方 法 是 异步 的 ,因为 它 需要 使 用 本 地 存 
储 , 而 本 地 存储 获取 对 象 的 方法 是 异步 的 ,这 表示 main. dart 中 的 代码 不 会 同步 执行 。 这 样 
在 main. dart 文件 中 ,检查 用 户 是 否 为 空 的 逻辑 可 能 会 在 用 户 更 新 之 前 被 调用 ,代码 如 下 : 


return model.user = = null?AuthPage():NewsListPage(_model); 


我 们 可 以 使 用 第 三 方 包 rxdart 解决 上 述 问题 ,如 图 13. 11 所 示 。 


Getting Started。 Flutter 


rxdart 0.22.3 


Published Oct 4, 20 FLUTTER WEB OTHER 


Readme ( gelog Example alling Ve @ 


RxDart 


About 


RxDart is a reactive functional programming library for Google Dart, based on ReactiveX 
Google Dart comes with a very decent Streams API out-of-the-box; rather than attempting to 
provide an alternative to this APl, RxDart adds functionality on top of it 


Version 


Dart 1.0is supported until release 0.15.x, version 0.16.x is no longer backwards compatible 
and requires the Dart SDK 2.0 


How To Use RxDart 


For Example: Reading the Konami Code 


Web & Server 


About 

RxDart ls an implementation of the 
popular reactiveX aplfor 
asynchronous programming, 
leveraging the native Dart Streams 


Author 
国 Q Frank Pepermans 

男 Q Brian Egan 

Uploader 

国 Q frank@igindo.com 

BQ brian@brianegan com 

国 Q hans@dotdotcommadot.com 


License 
Apache 2.0 (LICENSE) 
More 


Packages that depend 


13.11 第 三 方 包 rxdart 


rxdart 包 提供 了 很 多 处 理 异步 数据 功能 ,例如 实现 订阅 消息 功能 等 。 副 本 依赖 并 添加 


到 pubspec. yaml 文件 中 ,保存 后 ,IDE 会 自动 加 载 rxdart。 


在 mix_model. dart 文件 中 ,添加 一 个 新 属性 _userSubject, 类 型 是 rxdart 包 中 的 
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PublishSubject。PublishSubject 是 主题 对 象 , 它 允 许 我 们 发 布 和 订阅 主题 。PublishSubject 
泛 型 定义 为 bool, 表 示 PublishSubject 保存 着 一 个 布尔 类 型 的 值 。 代 码 如 下 : 


PublishSubject < bool > _userSubject = PublishSubject(); // 用 户主 题 
首先 创建 一 个 获得 主题 对 象 的 方法 ,代码 如 下 : 


// chapter13/13 - 12/1ib/scoped models/mix model. dart 


PublishSubject get userSubject{ // 获取 用 户主 题 
return _userSubject; // 返回 用 户主 题 
} 


我 们 通过 发 布 一 个 事件 表示 当前 的 用 户 是 否 为 认证 用 户 ,在 退出 方法 中 发 布 事件 代码 
如 下 : 

_userSubject. add(false); // 表 示 当 前 用 户 没 有 认证 

我 们 可 以 什么 都 不 发 送 , 表 示 这 是 一 个 不 关心 数据 的 事件 。 我 们 发 送 false 事件 ,表示 
用 户 已 取消 认证 。 在 main. dart 文件 中 ,我 们 在 initState( ) 方 法 中 使 用 model 获取 
userSubject 对 象 ,并 创建 bool 类 型 的 属性 isAuth, 然 后 调用 listen() 方 法 ,listen() 方 法 需 
要 传人 一 个 方法 表示 接收 事件 。 代 码 如 下 : 


// chapter13/13 - 12/1ib/main. dart 
_model. userSubject. listen( (dynamic isAuth){ // 监听 用 户主 题 


D); 


传人 的 方法 会 在 接收 到 主题 事件 时 执行 。 主 题 中 的 监听 方法 不 会 在 初始 化 时 被 执行 ， 
而 是 在 监听 到 事件 后 被 执行 。 我 们 需要 在 监听 方法 中 更 新 当前 的 状态 ,所 以 这 里 调用 
setState() 方 法 ,然后 把 _isAuth 的 值 设 置 为 参数 中 的 值 。 代 码 如 下 : 


// chapter13/13 - 12/1ib/main. dart 


_model. userSubject. listen( (dynamic isAuth){ // 监听 主题 事件 


setState(() { // 更 新 页 面 
_isAuth = isAuth; // 设置 _isauth 值 
DD); 


D); 


在 mix_model. dart 文件 中 ,我 们 可 以 在 自动 认证 方法 里 发 送 一 个 事件 ,通过 认证 时 发 
送 true 的 事件 ,并 且 不 需要 调用 notifyListeners() 方 法 了 ,因为 在 main. dart 文件 中 的 监听 
事件 调用 了 setState() 方 法 。 
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在 main. dart 文件 中 我 们 可 以 使 用 _isAuth 来 判断 显示 的 是 登录 页 面 还 是 列表 页 面 或 
者 是 其 他 页 面 。 代 码 如 下 : 


// Chapter13/13 - 12/1ib/main. dart 


routes: { // 命名 路 由 
'/admin': (context) { // 资讯 管理 路 径 
return !_isAuth?AuthPage( ) :ManageNews(_model) // 用 户 认证 判断 
'/home': (context) { // 资讯 列表 页 面 
return !_isRuth?RuthPage() // 用 户 认证 判断 
:NewsListPage(_model); 

'/': (context) { // 首页 

return !_isAuth?AuthPage( ) // 用 户 认 证 判断 


:NewsListPage(_model); 
} 


’ 


在 mix_model. dart 文件 中 ,用 户 登 录 和 用 户 注册 的 方法 也 需要 发 送 事件 ,如 果 登 录 或 
注册 成 功 则 需要 发 送 true 事件 ,和 否则 在 跳 转 页 面 时 会 出 现 问题 ,因为 main. dart 文件 中 的 属 
性 _isAuth 是 通过 监听 事件 来 更 新 值 的 。 

动态 解析 的 资讯 详情 页 也 需要 加 上 用 户 认证 的 验证 。 代 码 如 下 

// Chapter13/13 - 12/1ib/main. dart 

MaterialPageRoute < bool >(builder: (context) { 


return !_isAuth?AuthPage( ) :NewsDetailPage( ); // 是 否 通 过 验证 


D; 


最 后 将 main. dart 文件 中 的 ScopedModelDescendant 去 掉 , 我 们 使 用 了 监听 事件 和 
setState() 方 法 刷新 页 面 ,所 以 可 以 在 main. dart 文件 中 不 使 用 ScopedModelDescendant 了 。 


13.13 ”优化 用 户 登录 


上 一 节 我 们 使 用 第 三 方 包 rxdart 发 布 事件 和 订阅 事件 实现 了 页 面 的 自动 跳 转 。 我 们 
可 以 只 使 用 scope model 来 实现 自动 跳 转 , 例 如 在 MaterialApp 的 外 面 加 一 层 scope model， 
这 样 也 可 以 实现 自动 退出 后 跳 转 至 登录 页 面 的 功能 ,但 是 这 种 方式 有 个 缺点 , 当 我 们 调用 
notifyListeners() 方 法 重新 构建 时 ,很 多 的 ScopedModelDescendant 将 执行 builder() 方 法 ， 
这 意味 着 会 重新 构建 很 多 小 部 件 树 。Flutter 会 重新 构建 页 面 元 素 , 但 是 并 不 是 重新 泻 染 所 
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有 内 容 ,Flutter 会 比较 新 页 面 和 之 前 的 页 面 .只 改变 页 面 上 需要 改变 的 部 分 ,所 以 不 会 出 现 
性 能 问题 。 

如 果 我 们 在 MaterialApp 外 面 加 一 层 scoped model, 会 影响 很 多 的 小 部 件 。 优 化 的 一 
种 方式 是 把 一 个 scoped model 划分 成 多 个 独立 的 scoped model, 如 果 业 务 逻 辑 能 够 拆 分 ， 
可 以 在 不 同 的 子 小 部 件 树 添加 不 同 的 scoped model; 第 二 种 优化 方式 是 使 用 主题 订阅 ,我 
们 只 需 关心 事件 ,当主 题 接收 到 事件 后 ,我们 会 调用 main. dart 中 的 build() 方 法 重新 构建 
整个 小 部 件 树 ,而 且 主题 只 会 在 接收 到 事件 后 才 会 触发 ,所 以 当 我 们 收藏 资讯 或 者 获取 资讯 
列表 的 时 候 , 都 不 会 重新 构建 整个 小 部 件 树 ,这 样 就 能 提升 性 能 ,以 上 就 是 同时 使 用 scope 
model 和 rxdart 的 原因 。 


13.14 添加 收藏 功能 


本 节 实 现 一 下 收藏 功能 ,收藏 数据 当前 只 是 保存 在 内 存 中 ,而 没有 保存 到 数据 库 中 。 应 
用 面 对 的 用 户 不 止 一 个 人 ,服务 器 端 通过 在 资讯 中 添加 一 个 用 户 列表 保存 收藏 这 条 资讯 的 
用 户 , 如 图 13. 12 所 示 。 


Request URL 


http://\ocalhost:6379/news-api/allNewsList 


Response Body 


[ 
二 
"productId": "85", 
"productDTO0": { 


tp://19.hexunimg. cn/2814-12-84/171186102. jpg", 
"11111111", 


13.12 资讯 中 的 收藏 用 户 列表 


当 获取 资 讯 数据 的 时 候 , 可 以 判断 当前 的 用 户 是 否 在 这 个 收藏 用 户 列表 中 。 现 在 来 实 
现 这 一 功能 ,在 mix_model. dart 文件 中 的 toggleFavorite() 方 法 中 发 送 HTTP 请 求 , 请 求 
的 接口 如 图 13. 13 所 示 。 

接口 中 newsId 表示 资讯 1d,userld 表示 当前 登录 的 用 户 ,调用 接口 后 ,当前 登录 的 用 户 
Id 会 添加 到 这 条 资讯 的 收藏 用 户 列表 中 。 登 录 的 用 户 取消 收藏 资讯 的 接口 如 图 13. 14 
所 示 。 

接口 中 newsid 表示 资讯 id,userId 表示 当前 登录 的 用 户 ,调用 接口 后 ,当前 登录 的 用 户 
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BE ews-apiaddwish 


Response Class (Status 200 


ddWilshusei 


Model Schema 

{ 
"createDate": "2819-19-05T13:54:08.5952", 
"id": 0, 


"modifyDate": "2019-10-95T13:54:88.5952", 


Response Content Type | applicatiowison $ 
Parameters 


Parameter Value 


Description Parameter Type Data Type 

newsId requiredl mewsId query string 

userld (required) userld query string 

Response Messages 

HTTP Status Code Reason Response Model Headers 
201 Created 

401 Unauthorized 

403 Forbidden 

464 Not Found 


图 13.13 ”收藏 资讯 接口 


/news-api/deletewish 


deletewishUser 


Parameters 

Parameter Value Description Parameter Type Data Type 
newsId (required) newsld query string 
userId (required) userld query string 


Response Messages 


HTTP Status Code ”Reason Response Model Headers 
200 OK 
261 Created 
461 Unauthorized 
403 Forbidden 
484 Not Found 
Ty tout 
Curl 


图 13.14 取消 收藏 接口 


id 会 从 这 条 资讯 的 收藏 用 户 列表 中 删除 。 

我 们 需要 在 mix_model. dart 文件 中 的 toggleFavorite() 方 法 里 检查 更 新 的 收藏 状态 是 
否 为 true, 如 果 为 true, 需 要 把 当前 的 用 户 id 添加 到 当前 资讯 的 收藏 用 户 列 表 中 ,如 果 为 
false 就 从 选中 的 资讯 的 收藏 用 户 列表 中 删除 当前 的 用 户 。 代 码 如 下 : 
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// Chapter13/13 - 14/1ib/scoped models/mix model.dart 


final bool newValue = !currentNewsFavorite; // 更 新 的 收藏 值 


NewsModelupdateNews; // 更 新 的 资讯 实体 
if (newValue) { // 如 果 收 藏 
http. Response response = await http. put( // 添加 用 户 id 


'http://localhost:6379/news - api/addwish?newsId= $ {selectedNews. id} &userId = $ {_user. id} 
); 


if (response. statusCode == 200 | | response. statusCode == 201) {updateNews = 
NewsModel( // 请 求 成 功 
id: selectedNews. id, // 设置 资讯 id 
title: selectedNews. title, // 设置 资讯 标题 
description: selectedNews. description, // 设置 资讯 描述 
score: selectedNews. score, // 设置 资讯 分 数 
image: selectedNews. image, // 设置 资讯 图 片 
isFavorite: newValue, // 设置 收藏 状态 
userId: user. id, // 设置 用 户 id 
userName: _user. userName); // 设置 用 户 名 
} 
} else { 
http. Response response = await http. post( // 发 送 取消 收藏 请 求 


'http://localhost:6379/news - api/deletewish?newsId = $ {selectedNews. id} &userId 
= $ {_user. id}'); 


if (response. statusCode == 200 | | response. statusCode == 201) {updateNews = 
NewsModel( // 请 求 成 功 
id: selectedNews. id, // 设置 资讯 id 
title: selectedNews. title, // 设置 资讯 标题 
description: selectedNews. description, // 设置 资讯 描述 
score: selectedNews. score, // 设置 资讯 分 数 
image: selectedNews. image, // 设置 资讯 图 片 
isFavorite: newValue, // 设置 收藏 状态 
userId: _user. id, // 设置 用 户 id 
userName: _user. userName); // 设置 用 户 名 
} 


} 
这 样 就 保存 了 收藏 的 状态 。 下 一 节 将 实现 获取 收藏 状态 。 


13.15 获取 收藏 状态 


上 一 节 我 们 把 收藏 数据 保存 到 服务 器 中 了 .在 资讯 列表 页 面 NewsListPage 中 单 击 收 
藏 后 ,刷新 页 面 ,收藏 状态 不 见 了 ,因为 我 们 在 遍历 资讯 列表 时 ,没有 设置 收藏 状态 。 修 改 
mix_model. dart 文件 中 的 fetchNews() 获 取 资 讯 列表 方法 。 在 NewsModel 中 设置 收藏 属 
性 ,我 们 从 服务 器 端 获 得 了 收藏 资讯 的 用 户 列 表 , 可 以 根据 这 个 收藏 用 户 的 列表 设置 当前 资 
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讯 的 收藏 状态 ,代码 如 下 : 


// chapter13/13 - 15/1ib/scoped_models/mix_model. dart 


List < dynamic > wishListUsers // 收藏 用 户 列表 


= newsData[ 'wishListUsers'] as List< dynamic >; 

NewsModelnewsModel = NewsModel( // 创建 资讯 实体 
id: newsData[ 'id'].toString()， // 设置 资讯 id 
title: newsData[ 'title'], // 设置 资讯 标题 
description: newsData[ 'description’'], // 设置 资讯 描述 
score: newsData[ 'score'] 

== null ? 0.0 : newsData[ 'score'], // 设置 资讯 分 数 

userId: newsData[ 'userId'], // 设置 用 户 id 

userName: newsData[ 'userEmail'], // 设置 用 户 名 

isFavorite: 

wishListUsers. contains(_user. id), // 判断 当前 用 户 是 否 收藏 这 条 资讯 
image: newsData[ 'image'], // 资讯 图 片 


); 


Flutter 无 法 判断 newsData[ ' wishListUsers ' ] 的 类 型 ,所 以 可 以 这 样 写 newsData 
['wishListUsers'] as List < dynamic > 告诉 Flutter 可 以 把 newsData[ 'wishListUsers"] 转 化 
成 List 类 型 。contains () 方 法 可 以 检查 List 中 是 否 包含 对 应 的 值 。 


13.16 根据 条 件 显示 列表 和 总 结 


这 个 应 用 有 个 问题 ,任何 用 户 都 可 以 编辑 资讯 ,在 我 的 资讯 页 面 中 可 以 看 到 所 有 的 资 
讯 ,我 们 不 应 该 看 到 不 属于 我 们 创建 的 资讯 。 在 我 的 资讯 页 面 MyNewsPage 中 ,我 们 在 初 
始 化 方法 initState() 中 调用 了 model 中 的 fetchNews() 方 法 ,这 样 就 把 所 有 的 资讯 都 显示 
在 我 的 资讯 列表 页 面 了 。 我 们 可 以 在 fetchNews() 方 法 中 添加 参数 ,例如 使 用 命名 参数 
{onlyForUser:false} ,默认 值 设 为 false, 表 示 获 取 所 有 资讯 ,如果 onlyForUser 的 值 为 true， 
表示 只 获取 当前 用 户 的 资讯 。 代 码 如 下 : 


// Chapter13/13 - 16/1ib/scoped models/mix model. dart 


if (onlyForUser) { // 判断 onlyForUser 的 值 


_news = getNewslist.where( (NewsModel news) { // 遍历 资讯 列表 中 的 每 个 值 
return news.userId == user. id; // 返回 满足 条 件 的 资讯 
}) .toList(); // 转换 成 List 
} else { 


_news = getNewslist; // 返回 所 有 的 资讯 列表 
} 
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然后 在 我 的 资讯 页 面 的 初始 化 方法 中 ,给 获取 资讯 列表 的 方法 传 入 参数 ,代码 如 下 : 

widget. model. fetchNews(onlyForUser: true); // 获 取 当 前 用 户 创建 的 资讯 

本 章 我 们 学 习 了 用 户 认证 .注册 登录 ,以 及 通过 认证 用 户 来 访问 受 保护 的 资源 。 用 户 认 
证 一 般 在 服务 器 端 进行 验证 ,例如 验证 用 户 名 和 密码 。 本 章 还 学 习 了 token 和 Timer, 我 们 
使 用 保存 在 App 中 的 token 去 访问 资源 , 当 token 过 期 时 ,将 用 户 退 出 。 我 们 也 通过 设置 有 
效 期 的 方式 来 实现 自动 退出 。 我 们 还 结合 了 scope model 和 rxdart 来 实现 事件 的 发 布 和 监 
听 ,scope model 和 rxdart 的 结合 非常 高 效 ,使 我 们 不 用 更 新 全 部 UI, 只 是 有 选择 地 进行 
更 新 。 


访问 相机 和 图 库 


章 学 习 在 App 中 经 常 使 用 的 相机 和 图 库 ,我 们 可 以 使 用 设备 的 相机 或 者 图 片 库 为 资 
讯 添加 图 片 ,在 App 中 我 们 可 以 使 用 相机 拍摄 的 图 片 或 者 从 图 库 选 择 图 片 替换 当前 的 硬 编 
码 图 片 。 本 章 还 学 习 如 何 把 图 片上 传 到 服务 器 端 ,并 从 服务 器 端 获取 上 传 的 图 片 。 


14.1 选择 图 片 小 部 件 


我 们 需要 使 用 相机 拍摄 的 图 片 或 者 图 片 库 中 的 图 片 蔡 换 当前 的 图 片 。 在 编辑 资讯 页 面 
EditNewsPage 中 ,我 么 需要 添加 一 个 按钮 来 选择 并 添加 一 张 图 片 , 图 片 可 以 是 拍摄 的 图 片 
或 者 是 从 图 库 选 择 的 图 片 ,选中 后 上 传 到 服务 器 端 ,然后 在 添加 图 片 按钮 下 方 显示 预览 , 同 
时 我 们 把 服务 器 端的 图 片 URL 保存 到 资讯 news 中 。 

首先 在 widgets 目录 下 的 ui_element 目录 中 ,创建 image. dart 文件 ,引入 material 包 ， 
定义 类 ImageInput 继承 StatefulWidget。 代 码 如 下 : 


// Chapter14/14 - 01/1ib/widgets/ui_element/image. dart 


import 'package:flutter/material. dart'; // 引入 material 包 

class ImageInput extends StatefulWidget { // 创建 ImageInput 
_ImageInputStatecreateState() 

=> _ImageInputState( ); // 创建 状态 类 


} 
class _ImageInputState extends State < ImageInput > { // 定义 状态 类 
@override 
Widget build(BuildContext context) { // 构建 方法 
return Container( 


); 
} 
} 
现在 需要 在 build() 方 法 里 构建 泻 染 的 内 容 , 首 先 添加 一 个 按钮 来 提取 图 片 , 当 单 击 按 
钮 的 时 候 显 示 一 个 弹出 层 , 让 用 户 选择 使 用 相机 拍摄 图 片 还 是 图 库 中 的 图 片 ,然后 根据 用 户 
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的 选择 把 图 片 显 示 到 预览 的 地 方 。 这 里 需要 使 用 列 小 部 件 , 因 为 我 们 要 显示 两 个 小 部 件 , 一 
个 是 选择 图 片 的 按钮 , 男 一 个 是 预览 图 片 小 部 件 。 选 择 图 片 的 按钮 使 用 OutlineButton 小 


部 件 ,OutlineButton 按钮 只 有 文字 和 边框 ,没有 背景 。 代 码 如 下 : 


// Chapter14/14 - 01/1ib/widgets/ui_element/image. dart 


Widget build(BuildContext context) { // 构建 方法 


return Column( 
crossAxisAlignment: CrossAxisAlignment. center, // 居中 显示 
children: < Widget >[ // 列 的 子 部 件 
OutlineButton( // 边框 按钮 
child: Text(' 选 择 图 片 ')， // 按钮 上 文字 
onPressed: () {}, // 按钮 单 击 事件 


)， 
], 
); 
} 


在 编辑 资讯 页 面 ,引入 ImageInput 小 部 件 ,然后 在 “创建 资讯 ”按钮 上 面 添 加 


ImageInput 小 部 件 , 保 存 后 如 图 14. 1 所 示 。 


图 14.1 选择 图 片 小 部 件 
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我 们 可 以 给 OutlineButton 按钮 添加 一 个 边框 ,参数 是 borderSide, 值 是 BorderSide。 
BorderSide 可 以 定义 颜色 和 虚实 线 。 代 码 如 下 : 


// Chapter14/14 - 01/1ib/widgets/ui_element/image. dart 


borderSide: BorderSide( // 按钮 边框 


color: Theme. of(context).accentColor, // 边框 颜色 
width: 2, // 边框 宽度 
style: BorderStyle. solid), // 边框 虚实 线 


保存 后 ,OutlineButton 按钮 显示 更 清晰 了 ,如 图 14.2 所 示 。 


图 14.2 优化 OutlineButton 按钮 


14.2 使 用 图 片 选择 器 UI 


选择 图 片 的 按钮 小 部 件 已 经 构建 好 了 ,现在 需要 添加 选择 图 片 的 功能 ,我 们 需要 使 用 第 
三 方 包 image_picker, 如 图 14. 3 所 示 。 

在 项 目 中 添加 依赖 ,保存 后 IDE 会 自动 加 载 依赖 。 我 们 可 以 使 用 包 image_picker 中 
ImagePicker 的 pickImage() 方 法 指定 图 片 的 来 源 , 例 如 相机 还 是 图 片 库 。 


摄 图 


| 2 


image_picker 0.6.1+4 


Published Aug 24,2019 FLUTTER 
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14.3 第 三 方 包 image_picker 


在 ImageInput 小 部 件 中 ,需要 实现 一 个 弹出 层 , 用 户 可 以 在 弹出 层 中 选择 使 用 相机 拍 
片 还 是 图 库 的 图 片 。 我 们 在 _ImageInputState 添加 一 个 方法 openImagePicker(), 方 法 
中 实现 弹出 一 个 遮 音 层 , 代 码 如 下 


// Chapter14/14 - 02/1ib/widgets/ui_element/image. dart 


void openImagePicker(BuildContext context) { 


showModalBottomSheet( 
context: context, 
builder: (BuildContext context) { 
return Container( 
padding: EdgeInsets.all(10), 
child: Column( 
children: <Widget >[ 
FlatButton( 
child: Text(' 相 机 ')， 
onPressed: () {}, 
), 
SizedBox( 
height: 10, 
), 
FlatButton( 
child: Text(' 图 库 ')， 
onPressed: () {}, 
) 
],， 
), 


// 图 片 弹 出 层 
// 底部 弹出 层 
从 二 下 详 

// 构建 方法 

// 返回 Container 
// 设置 内 边 距 
// 列 小 部 件 

// 列 中 的 小 部 件 
// 无 背景 按钮 
// 按钮 文字 

// 按钮 单 击 事件 


// 固定 间距 
// 固定 高 度 


// 无 背景 图 片 
// 按钮 文字 
// 按钮 单 击 事件 
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图 14.4 图 片 选择 器 弹出 层 


这 样 就 成 功 地 显示 了 按钮 选项 。 下 一 节 将 学 习 单 击 按钮 后 调用 图 片 选择 器 ImagePicker。 
14.3 使 用 ImagePicker 选择 图 片 


本 节 把 底部 弹出 层 的 按钮 和 图 片 选择 器 ImagePicker 建立 联系 。 在 相机 按钮 的 单 击 事 
件 中 ,调用 ImagePicker 中 的 方法 。 代 码 如 下 : 


// Chapter14/14 - 03/1ib/widgets/ui_element/image. dart 


ImagePicker. pickImage( // 使 用 图 片 选 择 器 


source: ImageSource.camera, // 选择 相机 的 图 片 
maxWidth: 400 // 最 大 宽度 为 400 像素 
). then( (File imageFile){ // 异步 获取 图 片 文件 


Navigator. of (context). pop(); // 弹出 底部 弹出 层 
]) 
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ImageSource 表示 图 片 的 来 源 , 可 以 选择 相机 、 图 库 或 者 视频 。maxWidth 指定 图 片 的 
最 大 宽度 ,如 图 设置 的 最 大 宽度 太 大 ,会 占用 很 多 空间 ,也 会 占用 服务 器 端的 很 多 空间 ,例如 
上 传 高 分 辩 率 的 图 像 ,所 以 这 里 需要 设置 图 片 最 大 的 宽度 ,这 样 就 限制 了 所 拍摄 的 图 片 的 大 
小 。pickImage() 方 法 返回 的 是 Future 类 型 , 泛 型 是 File, 表 示 选 择 的 图 片 。 我 们 通过 then() 
方法 获取 选中 的 图 片 文 件 。File 类 是 Dart 提供 的 ,需要 引入 dart:io。dart:io 中 包含 输入 
输出 流 、 读 写 文 件 等 ,我 们 已 经 获得 这 张 图 片 ,但 是 还 没有 使 用 它 。 我 们 首先 要 使 用 导航 器 
的 pop0 〇 方法 ,把 底部 弹出 层 先 关 掉 。 

图 库 按钮 的 图 片 来 源 选 择 图 库 。 最 后 我 们 需要 给 应 用 授予 访问 图 片 和 相机 的 权限 。 
Android 不 需要 配置 任何 内 容 , 包 image_picker 已 经 设置 好 了 。iOS 需要 在 < project root >/ 
ios/Runner/Info. plist 中 配置 访问 权限 ,代码 如 下 : 


// Chapter14/14 - 03/Info. plist 


< key > NSPhotoLibraryUsageDescription </key > // 图 库 访问 权限 
< string> Main </string> // 访问 提示 描述 
<key> NSCameraUsageDescription </key> // 相机 访问 权限 
< string> Main </string> // 访问 提示 描述 


配置 好 后 就 可 以 使 用 iOS 的 模拟 器 来 选择 图 片 了 ,如 图 14. 5 所 示 。 


图 14.5 选择 图 库 中 的 图 片 
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但 是 目前 还 不 能 使 用 拍照 功能 ,这 是 因为 我 们 通过 拍照 选择 照片 需要 使 用 真实 的 设备 。 
下 一 节 我 们 将 通过 获取 到 的 图 片 文件 实现 图 片 预览 功能 。 


14.4 图片 预览 


在 _ImageInputState 类 中 添加 一 个 属性 ,表示 我 们 选择 的 图 片 ,类 型 是 File, 命 名 为 _ 
imageFile。 在 调用 pickImage() 方 法 的 then() 方 法 中 ,我 们 已 经 获得 了 选择 的 图 片 。 在 关 
闭 底 部 弹出 层 之 前 ,把 选中 的 图 片 存储 到 _ImageInputState 的 属性 _imageFile 中 ,然后 调用 
setState() 方 法 更 新 页 面 显示 。 代 码 如 下 : 


// Chapter14/14 - 04/1ib/widgets/ui_element/image. dart 


setState(() { // 更 新 页 面 


_imageFile= imageFile; // 设置 _imageFile 


}) 


这 样 就 把 所 选择 的 图 片 保 存 到 内 存 中 了 。 现 在 我 们 可 以 把 选中 的 图 片 输出 到 预览 中 。 
在 选择 图 片 OutlineButton 按钮 下 面 预 览 选中 图 片 ,代码 如 下 : 


// Chapter14/14 - 04/1ib/widgets/ui_element/image. dart 


SizedBox( // 设置 间距 


height: 10, // 高 度 为 10 像素 间距 
)， 
_imageFile != null // 选中 的 图 片 不 为 空 
? Image. file( // 显示 图 片 
_imageFile, // 选中 的 图 片 
fit: BoxFit. cover, // 不 变形 显示 
height: 300, // 高 度 为 300 像素 
) 
: Center( // 居中 显示 
child: Text( ' 请 选择 图 片 ')， // 居中 的 文字 


), 


保存 后 选择 一 张 图 片 ,我 们 发 现 所 选中 的 图 片 显 示 到 图 片 预 览 中 了 ,如 图 14. 6 
所 示 。 
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图 14.6 预览 图 片 


14.5 上 传 图 片 


预览 中 的 图 片 只 是 保存 到 内 存 中 了 ,没有 保存 到 服务 器 端 。 我 们 需要 把 所 选择 的 图 片 
上 传 到 服务 器 端 ,然后 再 使 用 这 个 图 片 。 我 们 需要 使 用 上 传 图 片 的 接口 ,如 图 14.7 所 示 。 

使 用 接口 上 传 图 片 后 的 返回 值 , 如 图 14. 8 所 示 。 

在 编辑 资讯 页 面 的 _EditNewsPageState 类 中 添加 一 个 方法 _setImage()。 代 码 如 下 : 


// Chapter14/14 - 05/1ib/pages/edit news. dart 


void _setImage(File imageFile){ // 设置 图 片 的 方法 
} 


_setImage() 方 法 中 的 参数 imageFile 表示 从 选择 图 片 小 部 件 ImageInput 中 所 选 的 图 
片 ，setImage() 方 法 中 需要 调用 服务 器 端 上 传 图 片 的 接口 ,下 一 节 我 们 实现 这 个 功能 。 首 
先 我 们 需要 把 _setImage() 方 法 传人 到 ImageInput 小 部 件 中 ,代码 如 下 : 


ImageInput(_setImage) 
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file-controller : File Controller 


/api/uploadFile 


Show/Hide 。 List Operatlons 。 Expand Operations 
uploadCosmeticspictureAP1 


Response Class (Status 200) 
Model Schema 


{ 

"files"; [ 
"deleteType": "string", 
deleteurl": "string", 
desc": "string”, 
id": 0, 
"imageDesc": "string", 
ane": "string", 
result": @, 
"size": 9 


Response Content Type | 


Parameters 
Parameter Value Description Parameter Type Data Type 
files 选择 交 件 02.jpg files formData undefined 


Response Messages 


HTTP Status Code Reason Response Model Headers 
201 Created 

491 Unauthorized 

403 Forbidden 

494 Not Found 

Ty tout 


14.7 上 传 图 片 的 接口 


Request URL 


http://localhost:6379/api/uploadFile 


Response Body 


江 


“imageDesc”: null, 

"thumbnailUrtl": null, 

http://localhost:6379/downloadFile/9854678e-7408-4fS5e-80ec-038ad7d9581a. jpg" 

“id": 155， 

"9854678e-7488-4f5e-80ec-038ad7d9581a. jpg", 
:null, 

"size":; 195028, 

"deleteUrl": null, 

"deleteType": null 


图 14.8 上 传 图 片 接口 返回 内 容 
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在 ImageInput 小 部 件 中 创建 一 个 方法 属性 ,然后 通过 构造 器 赋值 ,代码 如 下 : 


// Chapter14/14 - 05/1ib/widgets/ui_element/image. dart 


final Function setImage; 
ImageInput (this. setImage); 


// 设置 图 片 的 方法 
// 构造 器 赋值 


然后 在 选择 图 片 后 的 then() 方 法 中 ,调用 设置 图 片 的 方法 ,代码 如 下 : 


// Chapter14/14 - 05/1ib/widgets/ui_element/image. dart 


ImagePicker. pickImage( 


// 图 片 选择 器 


source: ImageSource. gallery, maxWidth: 400) // 从 图 库 中 选择 
.then( (File imageFile) { // 选择 图 片 后 
setState(() { // 刷新 页 面 
widget. setImage( imageFile); // 设置 选中 图 片 
_imageFile = imageFile; // 设置 选中 图 片 属性 


DD); 


这 样 我 们 就 把 在 小 部 件 ImageInput 中 选中 的 图 片 设置 到 它 的 父 类 小 部 件 中 ,也 就 是 编 
辑 资讯 页 面 。 下 一 步 我 们 需要 在 设置 图 片 的 方法 中 ,上 传 这 个 选中 的 图 片 ,然后 把 返回 的 图 
片 URL 路 径 设 置 为 资讯 实体 的 属性 。 在 编辑 资讯 页 面 需要 验证 一 下 资讯 中 的 图 片 不 能 为 


空 , 代 码 如 下 : 


// Chapter14/14 - 05/1ib/pages/edit_news. dart 


if( image. isEmpty){ 


// 如 果 资 讯 图 片 为 空 


showDialog(context: context, builder: (BuildContext context) { 


return AlertDialog( // 弹出 提示 框 
title: Text( ' 提 示 ')， // 提示 标题 
content: Text(' 资 讯 图 片 不 能 为 空 ')， // 提示 内 容 
actions: <Widget >[ // 提示 操作 
RaisedButton(child: Text( ' 确 认 ')， // 操作 按钮 
onPressed: (){ // 按钮 单 击 事件 
Navigator. of (context). pop( ); // 关闭 提示 框 


}1,) 
]， 
) 
]) 
return; 


} 
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14.6 上传 图 片 到 服务 器 端 


首先 我 们 需要 引入 一 个 第 三 方 包 dio, dio 包 提 供 了 很 多 客户 端 功 能 。 在 mix_model. 
dart 文件 中 ,添加 一 个 方法 uploadImage 来 向 服务 器 端 上 传 图 片 ,代码 如 下 : 


// Chapter14/14 - 06/1ib/scoped_models/mix model. dart 


Future < String > uploadImage(File imageFile) async {// 上 传 图 片 


Diodio = Dio(); // 创建 Dio 对 象 
FormDataformData = FormData. fromMap({ // 创建 表单 数据 
'files': // 数据 参数 


await MultipartFile. fromFile( imageFile. path, filename: imageFile. path. split('/'). last), 
// 上 传 的 图 片 
D); 
Response response 
= await dio. post('http://localhost:6379/api/uploadFile', data: formData); // 上 传 图 片 


if (response, statusCode != 200 &&response. statusCode != 201) 


{ // 请 求 报错 
print (response); // 打印 错误 
return ''; // 返回 空 字符 串 
}else{ 
return response. data[ 'files'][0]['url']; // 返回 图 片 URL 


} 


FormData 是 POST 请 求 中 发 送 的 数据 ,response. data[ 'files'][0j[L'url'] 获 取 的 是 图 
14. 8 中 响应 格式 的 数据 。 这 样 我 们 就 获得 了 上 传 图 片 的 URL, 我 们 把 资讯 图 片 赋值 为 上 
传 图 片 的 URL, 代 码 如 下 : 


// Chapter14/14 - 06/1ib/scoped models/mix model. dart 


void _setImage(File imageFile, MainScopeModel model){  // 设置 图 片 方法 
model. uploadImage( imageFile) .then((String imageURL){ // 赋值 上 传 图 片 
image = imageURL; // 设置 资讯 图 片 

]) 


这 样 我 们 就 把 上 传 的 图 片 保存 到 服务 器 端 了 ,并 且 将 上 传 的 图 片 显示 到 模拟 器 上 了 ,如 
图 14.9 所 示 。 


资讯 列表 
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图 14.9 上 传 到 服务 端的 图 片 


14.7 编辑 上 传 的 图 片 
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当 我 们 在 我 的 资讯 页 面 编辑 某 条 资讯 的 时 候 ,首先 会 加 载 选择 图 片 小 部 件 ,我 们 需要 判 
断 model. selectedNews 的 值 是 否 为 空 ,如 果 为 空 , 则 资讯 图 片 image 为 空 ,否则 image 为 当 


前 选中 资讯 的 图 片 URL, 同 时 需要 在 选择 图 片 小 部 件 中 
// Chapter14/14 - 07/1ib/widgets/ui_element/image. dart 


Widget _buildImagePreView(MainScopeModel model) { 
if (_imageFile != null) { 
return Image. file( 
_imageFile, 
fit: BoxFit. cover, 
height: 300, 
); 
} else if ( 
model. selectedNewsId != null) { 
widget. initImage(model. selectedNews. image); 
return Image. network( 
model. selectedNews. image, 


显示 图 片 ,代码 如 下 : 


// 构建 预览 小 部 件 
// 选中 图 片 不 为 空 
// 返回 选中 图 片 


// 不 扭曲 显示 
// 高 度 为 300 像素 


// 如 果 是 编辑 模式 
// 设置 选中 图 片 URL 
// 显示 编辑 图 片 

// 编辑 图 片 RL 
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fit: BoxFit. cover, // 不 扭曲 显示 
height: 300, // 高 度 为 300 像素 
); 
} elsel{ 
return Center( // 新 建 模式 
child: Text( "请 选择 图 片 ")， // 提示 选择 图 片 


) 
} 
} 


widget. initImage() 方 法 是 调用 编辑 资讯 页 面 中 的 初始 化 图 片 方 法 ,表示 在 编辑 模式 
时 ,需要 为 资讯 图 片 属性 赋值 ,代码 如 下 : 


// Chapter14/14 - 07/1ib/pages/edit_news. dart 


void _initImage(String imageURL){ // 初始 化 资讯 图 片 


image = imageURL; // 赋值 选中 资讯 图 片 
} 
这 样 我 们 就 可 以 编辑 上 传 图 片 了 。 


14.8 总 结 


本 章 学 习 了 如 何 使 用 设备 的 相机 和 图 库 .如何 上 传 选 中 的 图 片 ,以 及 如 何 使 用 第 三 方 包 
image_picker。 使 用 第 三 方 包 的 时 候 要 注意 阅读 文档 ,例如 image_picker 需要 配置 设备 的 
使 用 权限 。 本 章 我 们 创建 了 选择 图 片 小 部 件 来 实现 获取 图 片 的 相关 功能 ,例如 预览 图 片 的 
功能 。 上 传 图 片 的 方式 取决 于 服务 器 端 提供 的 接口 ,通常 请 求 中 需要 配置 附加 内 容 。 


Flutter 动画 效果 


我 们 已 经 完成 了 应 用 的 所 有 功能 。 本 章 我 们 给 应 用 添加 一 些 动画 效果 来 提高 用 户 体 
验 。 用 户 的 体验 取决 于 提供 的 动画 是 否 有 帮助 ,因为 动画 能 帮助 用 户 了 解 哪 里 发 生 了 变化 ， 
从 而 引导 用 户 注意 到 某 些 内 容 。 


15.1 浮动 按钮 


首先 我 们 添加 一 些 能 产生 动画 效果 的 小 部 件 , 在 资讯 详情 页 news_detail. dart 文件 中 ， 
把 返回 按钮 删除 ,然后 在 页 面 Scaffold 中 添加 一 个 浮动 按钮 ,代码 如 下 : 


// Chapter15/15 - 01/1ib/pages/news_detail. dart 


floatingActionButton: FloatingActionButton( // 浮动 按钮 
child: Icon(Icons.more vert), // 按钮 小 图 标 
onPressed: () {}, // 按钮 单 击 事件 


), 


这 样 我 们 就 在 资讯 详情 页 中 创建 了 一 个 浮动 按钮 ,如 图 15. 1 所 示 。 

我 们 需要 实现 当 用 户 单 击 浮动 按钮 时 ,可 以 显示 收藏 按钮 和 用 户 信息 按钮 。 我 们 在 添 
加 动画 之 前 ,把 这 些 按钮 添加 上 ,然后 再 添加 动画 效果 。Scaffold 中 的 参数 
floatingActionButton 可 以 设置 为 Column,Column 中 可 以 添加 多 个 FloatingActionButton， 
Column 列 默认 占 满 整个 页 面 ,所 以 这 样 这些 浮 动 按钮 将 显示 在 页 面 顶 部 ,我 们 需要 设置 参 
数 minAxisSize 为 MainAxisSize. min ,表示 列 Column 不 会 占 满 整个 页 面 , 只 是 满足 当前 小 
部 件 的 高 度 。 代 码 如 下 : 


// Chapter15/15 - 01/1ib/pages/news_detail. dart 


floatingActionButton: Column( // 浮动 按钮 列 


mainAxisSize: MainAxisSize. min, // 满足 列 小 部 件 高 度 
children: <Widget >[ // 列 中 的 小 部 件 


FloatingActionButton( // 浮动 按钮 


250 二 | Flutter 实 战 指南 


= 全 


诺 贝 尔 奖 将 陆续 揭晓 


图 15.1 资讯 详情 页 的 浮动 按钮 


child: Icon(Icons. favorite_ border), // 浮动 按钮 图 标 
onPressed: () {}, // 按钮 单 击 事件 
), 

FloatingActionButton( // 浮动 按钮 
child: Icon(Icons. email), // 浮动 按钮 图 标 
onPressed: () {}, // 按钮 单 击 事件 
), 

FloatingActionButton( // 浮动 按钮 
child: Icon(Icons. more_vert), // 浮动 按钮 图 标 
onPressed: () {}, // 按钮 单 击 事件 


保存 后 ,资讯 详情 页 所 显示 内 容 如 图 15.2 所 示 。 

因为 我 们 需要 动态 显示 收藏 按钮 和 用 户 信息 按钮 ,所 以 需要 让 资讯 详情 页 继承 
StatefulWidget, 我 们 在 内 部 改变 一 些 数据 来 动态 显示 图 标 按钮 。 

在 实现 动态 显示 收藏 按钮 之 前 ,我 们 先 优化 一 下 浮动 按钮 。 首 先 给 这 些 浮动 按钮 加 一 
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图 15.2 资讯 详情 页 的 浮动 按钮 
些 间距 ,代码 如 下 : 
SizedBox(height: 5,), // 添 加 浮动 按钮 间距 


FloatingActionButton 小 部 件 中 的 参数 mini 表示 使 用 小 版 本 的 浮动 按钮 ,我 们 可 以 把 
收藏 按钮 和 用 户 信息 按钮 中 的 mini 设置 为 true, 代 码 如 下 : 


mini: true // 显 示 较 小 浮动 按钮 
重新 加 载 页 面 后 报错 ,如 图 15. 3 所 示 。 


图 15.3 使 用 浮动 按钮 报错 


我 们 这 里 使 用 了 多 个 FloatingActionButton ,如 果 把 多 个 FloatingActionButton 放 在 一 
个 列 Column 中 ,必须 保证 每 个 FloatingActionButton 小 部 件 中 的 参数 heroTag 唯一 ,所 以 
我 们 需要 给 每 个 FloatingActionButton 添加 标签 ,名 字 可 以 自 定义 ,例如 "ike', 代 码 如 下 : 


heroTag: 'like', // 给 浮动 按钮 添加 标签 
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我 们 再 给 收藏 按钮 和 用 户 信息 按钮 设置 背景 色 和 图 标的 颜色 ,代码 如 下 : 


// chapter15/15 - 01/1ib/pages/news_detail. dart 


backgroundColor: Colors. white, // 设置 浮动 按钮 背景 色 
Icon( // 浮动 按钮 上 的 图 标 
Icons. favorite border, 

color: Theme. of (context) . accentColor, // 图 标的 颜色 


) 


保存 后 ,资讯 详情 页 所 显示 内 容 如 图 15.4 所 示 。 


诺 贝尔 奖 将 陆续 揪 晓 


图 15.4 优化 后 的 浮动 按钮 
我 们 已 经 在 资讯 详情 页 添加 了 3 个 浮动 按钮 ,但 是 在 单 击 事件 中 没有 添加 任何 内 容 。 
单 击 收藏 按钮 后 需要 调用 mix_model. dart 中 的 收藏 方法 。 代 码 如 下 : 
model. toggleFavorite( ); // 单 击 收藏 浮动 按钮 后 调用 收藏 方法 
然后 根据 当前 资讯 的 收藏 状态 显示 不 同 的 收藏 图 标 , 代 码 如 下 : 


// Chapter15/15 - 01/1ib/scoped models/mix model. dart 
model. selectedNews. isFavorite? // 收藏 显示 实心 
Icons. favorite: Icons. favorite border // 没收 藏 显示 空心 
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15.2 添加 动画 效果 


收藏 按钮 和 用 户 信息 按钮 可 以 通过 单 击 最 下 面 的 浮动 按钮 切换 显示 和 隐藏 ,我 们 可 以 
通过 _ NewsDetailPageState 类 中 的 状态 属性 切换 显示 和 隐藏 ,也 可 以 通过 动画 的 方式 控制 
显示 和 隐藏 。 

我 们 可 以 控制 收藏 按钮 和 用 户 信息 按钮 的 大 小 ,按钮 从 0 到 1 表示 显示 ,从 1 到 0 表示 
消失 。Flutter 官网 提供 了 很 多 实现 动画 效果 的 方式 ,而 且 附 带 了 很 多 详细 的 示例 ,如 图 15.5 
所 示 。 


Flutter 1.9 is live! See what's new in 


Also see and the revamped 
Nimeuon and motion widgets "” 
Docs > Development > UI > Widgets > 
Bring animations to your app. 
See more widgets in the widget catalog. 
AnimatedBuilder AnimatedContainer AnimatedCrossFade 
A general-purpose widget for A container that gradually changes A widget that cross-fades between 
building animations. its values over a period of time. two given children and animates 
AnimatedBullder is useful for more itself between their sizes. 
complex widgets that wish to 
Include an animation as part of a 
larger build function. To use 
AnimatedBuilder, simply construct 
the widget and pass it a builder 
function. 
Documentatior Documentation Documentation 


15.5 Flutter 官网 动画 文档 


首先 在 _NewsDetailPageState 类 中 创建 一 个 AnimationController 类 型 的 属性 ,然后 在 
initState() 方 法 中 初始 化 它 。 代 码 如 下 : 


// Chapter15/15 - 02/1ib/pages/news_detail. dart 
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AnimationController controller; // 添加 属性 


@override 
void initState() { // 初始 化 方法 
super. initState( ); // 父 类 初始 化 
_controller = AnimationController(); // 创建 对 象 


} 


AnimationController 的 构造 器 需要 配置 一 下 ,参数 vsync 设置 为 this ,表示 动画 属于 当 
前 的 小 部 件 , 如 果 当 前 的 小 部 件 不 在 页 面 中 显示 ,动画 将 不 会 被 执行 。 要 使 参数 vsync 生效 
需要 在 State 类 后 面 加 上 with TickerProviderStateMixin ,这 样 就 可 以 把 动画 绑 定 在 这 个 小 
部 件 中 了 。 代 码 如 下 : 


// Chapter15/15 - 02/1ib/pages/news_detail. dart 


class _NewsDetailPageState extends State < NewsDetailPage > 
with TickerProviderStateMixin{ // 绑 定 动画 


_controller = AnimationController(vsync: this); // 绑 定 当 前 小 部 件 


我 们 还 可 以 设置 AnimationController 中 的 duration 参数 ,代码 如 下 : 


AnimationController(vsync: this, duration 

: Duration( seconds: 3)); // 动 画 持续 的 时 间 

在 duration 参数 中 现在 我 们 定义 了 一 个 动画 的 控制 器 ,动画 控制 器 可 以 控制 动画 。 我 
们 还 没有 定义 动画 ,只 是 创建 了 动画 控制 器 。 下 一 步 需 要 将 动画 控制 器 附加 到 具体 的 动画 
上 。 动 画 效果 包括 缩放 、 滑 动 、 渐 变 、 旋 转 等 。 这 里 可 以 使 用 缩放 的 动画 ,和 其 他 小 部 件 一 
样 ,动画 是 在 Flutter 中 定义 好 的 。 首 先 使 用 ScaleTransition 小 部 件 , 它 需要 指定 一 个 子 部 
件 , 例 如 收藏 浮动 按钮 。 代 码 如 下 : 


// Chapter15/15 - 02/1ib/pages/news_detail. dart 


ScaleTransition( 

child: FloatingActionButton( 
backgroundColor: Colors. white, 
heroTag: 'like', 


这 样 设置 就 意味 着 收藏 浮动 按钮 的 大 小 会 有 所 变化 。ScaleTransition 设置 参数 scale， 
定义 ScaleTransition 中 的 子 部 件 如 何 伸缩 ,参数 的 值 需 要 设置 一 个 动画 ,描述 如 何 伸缩 变 
化 。 可 以 使 用 CurvedAnimation ,CurvedAnimation 可 以 播放 一 组 预定 义 的 动画 ,动画 曲线 
是 一 个 数学 函数 ,描述 动画 以 什么 速度 开始 和 结束 ,以 及 在 这 段 期 间 动 画 曲 线 如 何 变 化 。 很 
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多 动画 都 需要 定义 动画 曲线 。CurvedAnimation 的 参数 中 ,需要 注册 一 个 父 类 , 值 是 动画 控 
制 器 。 代 码 如 下 : 


parent: controller // 赋 值 动画 控制 器 

动画 控制 器 能 控制 动画 的 启动 .暂停 ` 回 退 等 。 我 们 还 需要 设置 参数 curve, 表 示 动 画 曲 
线 。 参 数 curve 的 值 可 以 使 用 Interval 对 象 , Interval 是 由 Flutter 提供 的 ,Interval 允许 我 
们 定义 动画 曲线 。 在 Interval 对 象 中 ,需要 定义 动画 的 起 点 和 终点 。 代 码 如 下 : 

curve: Interval(0,1) // 定 义 动画 的 起 点 和 终点 

如 果 我 们 设置 的 动画 持续 时 间 是 6 秒 ,然后 设置 动画 曲线 为 Interval(0. 5,1) ,表示 动画 
效果 将 在 3 秒 后 开始 ,并 且 动 画 持 续 时 间 为 3 秒 。Interval 第 三 个 参数 可 以 设置 动画 曲线 效 
果 , 例 如 Curves. easeOut, 表 示 快 速 地 开始 ,然后 慢 慢 地 减速 。 代 码 如 下 : 

curve: Interval(0,1,curve: Curves. easeOut) // 定 义 动画 曲线 

在 最 下 面 的 浮动 按钮 单 击 事件 中 ,我 们 需要 判断 当前 的 动画 是 否 已 经 播放 过 了 ,如 果 播 
放 过 了 就 让 它 回 深 。 代 码 如 下 : 


// Chapter15/15 - 02/1ib/pages/news_detail. dart 


if(_controller. isDismissed){ // 如 果 没 有 播放 过 
_controller. forward( ); // 从 0 到 1 显示 
}else{ // 如 果 播 放 过 了 
_controller. reverse( ); // 从 1 到 0 隐藏 


} 


如 果 _controller. isDismissed 为 true, 则 表示 没有 播放 过 动画 ,这 样 我 们 就 给 收藏 按钮 
添加 了 动画 效果 ,使 用 同样 的 方式 可 以 给 用 户 信息 按钮 添加 动画 效果 。 


15.3 旋转 动画 效果 


上 一 节 我 们 给 收藏 按钮 和 用 户 信息 按钮 添加 了 缩放 效果 的 动画 ,本 节 给 最 下 面 的 浮动 
按钮 添加 旋转 的 动画 效果 。 我 们 要 旋转 的 内 容 是 最 下 面 浮动 按钮 的 小 图 标 ,我 们 使 用 另外 
一 种 方式 包装 图 标 小 部 件 。 

我 们 使 用 Flutter 提供 的 AnimatedBuilder, AnimatedBuilder 需要 传人 一 个 builder() 
方法 ,方法 中 返回 小 图 标 , 代 码 如 下 : 


// Chapter15/15 - 03/1ib/pages/news_detail. dart 


AnimatedBuilder( // 构建 动画 
builder: (BuildContext context, Widget child) { // 构建 方法 
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return Icon( Icons. more vert); // 返回 小 图 标 
}) 


现在 我 们 需要 使 用 Transform() 小 部 件 包装 Icon 图 标 小 部 件 , Transform() 表 示 动 画 
展示 小 图 标 , AnimatedBuilder 可 以 与 动画 控制 器 AnimationController 建立 联系 , 当 
AnimationController 播放 或 者 回 滚动 画 时 ,AnimatedBuilder 中 的 builder() 方 法 会 重新 构 
建 , 所 以 在 AnimatedBuilder 中 需要 附加 动画 ,并 绑 定 动画 。 首 先 绑 定 动 画 ,给 
AnimatedBuilder 中 参数 animation 赋值 , 值 是 动画 控制 器 _controller, 这 样 当 动画 向 前 或 向 
后 播放 时 ,builder 中 的 方法 会 重新 构建 ,在 builder() 方 法 中 我 们 可 以 实现 一 些 动画 效果 , 代 
码 如 下 : 


// Chapter15/15 - 03/1ib/pages/news_detail. dart 


AnimatedBuilder( 


animation: _controller, // 绑 定 动画 控制 器 
builder: (BuildContext context, Widget child) {  // 构建 方法 
return Transform(child: // 动画 效果 
Icon(Icons. more_vert)); // 图 标 小 部 件 


D), 


接 下 来 配置 Transform 小 部 件 的 transform 参数 ,代码 如 下 : 
transform: Matrix4. rotationZz(_controller. value) // 设 置 transform 


Matrix4 是 一 个 4D 矩阵 ,rotationZ 是 Matrix 4 的 一 个 构造 函数 ,表示 设置 在 Z 轴 上 旋 
转 。_controller. value 表示 Matrix4 自动 跟踪 从 0 到 1 的 进度 或 从 1 到 0。 

优化 一 下 显示 方式 ,将 _controller. value 替换 成 controller. value * 0. 5 * math. pi, 表 示 
旋转 90 度 ,然后 设置 Transform 的 参数 alignment, 让 旋转 的 图 标 居中 显示 ,代码 如 下 ， 


alignment:Fractional0ffset. center, // 居 中 显示 图 标 


这 样 我 们 就 实现 了 旋转 的 动画 效果 。 


15.4 渐变 动画 效果 


在 登录 页 面 中 ,我 们 通过 是 否 显示 确认 密码 切换 登录 页 面 和 注册 页 面 , 确 认 密码 的 文本 
框 可 以 使 用 动画 效果 优化 一 下 ,在 auth. dart 文件 中 ,添加 一 个 动画 控制 器 ,代码 如 下 : 


// Chapter15/15 ~ 04/1ib/pages/auth. dart 


class _AuthPageState extends State < AuthPage> 
with TickerProviderStateMixin{ // 登录 页 面 使 用 vsync 


AnimationController controller; 
@override 
void initState() { 
super. initState( ); 
_controller = AnimationController( 
vsync: this, duration: Duration(seconds: 3)); 
} 
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// 创建 动画 控制 器 属性 


// 初始 化 方法 

// 父 类 初始 化 

// 创建 动画 控制 器 
// 设置 动画 持续 时 长 


这 样 我 们 就 创建 了 动画 控制 器 。 现 在 需要 实现 渐变 动画 ,在 构建 确认 密码 文本 框 
buildConfirmTextField() 方 法 中 ,返回 FadeTransition 包装 的 文本 框 小 部 件 。 代 码 如 下 : 


// Chapter15/15 - 04/1ib/pages/auth. dart 


FadeTransition buildConfirmTextField() { 
return FadeTransition( 
child: TextFormField( 


// 构建 确认 密码 文本 框 
// 渐变 动画 效果 
// 确认 密码 文本 框 


FadeTransition 渐变 的 动画 效果 参数 是 opacity, 同样 可 以 使 用 CurvedAnimation 赋 


值 ,代码 如 下 : 


// chapter15/15 - 04/1ib/pages/auth. dart 


FadeTransition( 

opacity: CurvedAnimation( 

parent: controller, 

curve: Interval(0, 1,curve: Curves.easeIn) 


) 


// 渐变 动画 效果 
// 渐变 方式 显示 
// 绑 定 动画 控制 器 
// 动画 曲线 


这 样 就 实现 了 确认 密码 文本 框 渐变 的 动画 效果 。 下 一 步 在 切换 按钮 的 单 击 事件 中 , 控 


制 动 画 效果 。 代 码 如 下 : 


// Chapter15/15 ~ 04/1ib/pages/auth. dart 


setState(() { 
if(_authMode == AuthMode. Login){ 
_authMode = AuthMode. Singup; 
_controller. forward( ); 
}else{ 
_authMode = AuthMode. Login; 
_controller. reverse(); 
} 
D); 


// 刷新 页 面 显示 

// 如 果 是 登录 页 面 
// 切换 到 注册 页 面 
// 动画 显示 确认 密码 
// 如 果 是 注册 页 面 
// 切换 到 登录 页 面 
// 动画 隐藏 注册 按钮 


这 样 我 们 就 把 确认 密码 的 显示 和 隐藏 添加 了 动画 效果 。 
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15.5 滑动 动画 效果 


在 构建 确认 密码 的 方法 中 ,给 TextFormField 小 部 件 外 面 添加 小 部 件 SlideTransition， 
我 们 可 以 配置 SlideTransition 的 参数 position ,position 表示 当前 的 文本 框 可 以 上 下 移动 。 
我 们 不 能 给 参数 position 赋值 曲线 动画 。 应 该 配置 一 个 位 置 动 画 , 首 先 在 _AuthPageState 
类 中 添加 Animation 类 型 的 属性 _slideAnimation。Animation 的 泛 型 设置 为 Offset, 表 示 
相对 于 当前 小 部 件 显示 位 置 的 偏 移 量 。 代 码 如 下 : 


Animation < Offset >_slideAnimation; // 创建 位 置 动画 属性 
在 初始 化 方法 中 实例 化 一 个 _slideAnimation ,代码 如 下 : 


// Chapter15/15 - 05/1ib/pages/auth. dart 


_slideAnimation = 


Tween(begin: Offset( -2, 0), end: Offset(0, 0)) // 位 置 偏 移 量 
.animate( // 动画 曲线 
CurvedAnimation( 
parent: _controller, // 绑 定 控制 器 
curve: Interval(0, 1, 
curve: Curves. fastOutSlowIn))); // 设置 动画 曲线 


Tween 有 两 个 参数 begin 和 end, 表 示 开 始 位 置 和 最 终 位 置 。begin 和 end 可 以 通过 
Offset 创建 ,Offset 有 两 个 参数 ,zx 和 > ,分 别 表示 水 平 的 偏 移 量 和 垂直 的 偏 移 量 。Tween() 
只 是 一 个 配置 ,需要 调用 animate( ) 方 法 转化 成 动画 ,animate() 方 法 中 可 以 传人 曲线 动画 
CurvedAnimation,CurvedAnimation 的 参数 parent 可 以 设置 为 动画 控制 器 ,CurvedAnimation 
的 参数 curve 可 以 设置 动画 曲线 。 这 样 我 们 就 实现 了 滑动 的 动画 效果 。 


15.6 Flutter 中 的 Hero 和 Sliver 


我 们 可 以 优化 导航 资讯 详情 页 的 效果 。Flutter 提供 了 Hero 小 部 件 ,Hero 小 部 件 以 动 
画 效 果 显 示 内 容 。 在 news_card. dart 文件 中 ,在 占 位 图 片 外 面 添加 Hero 小 部 件 , 代 码 
如 下 : 


// Chapter15/15 - 06/1ib/widgets/news/news_card. dart 


Hero( // Hero 小 部 件 
child: FadeInImage( // 占 位 图 片 小 部 件 


Hero 需要 配置 参数 tag,tag 必须 是 唯一 的 ,所 以 我 们 把 tag 设置 为 资讯 的 Id。 代码 
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如 下 : 
tag: news. id, // Hero 小 部 件 标签 


然后 在 资讯 详情 页 面 NewsDetailPage 中 ,把 详情 页 面 中 的 资讯 图 片 也 用 Hero 小 部 件 
包装 起 来 ,同时 设置 tag 参数 ,tag 参数 的 值 设 为 news. id, 这 样 Flutter 就 把 这 两 个 页 面 建立 
起 了 联系 ,实现 Hero 的 动画 效果 。 

我 们 还 可 以 实现 这 样 一 个 动画 效果 , 当 我 们 向 上 滚动 页 面 的 时 候 , 把 显示 图 片 和 导航 栏 
合并 到 一 起 。 当 向 下 滑动 时 再 把 图 片 显示 出 来 。 在 资讯 详情 页 中 ,把 导航 栏 AppBar 注释 
掉 。 在 body 中 创建 小 部 件 CustomScrollView,CustomScrollView 允许 我 们 自 定 义 滚 动 效 
果 。 它 有 CustomScrollView 中 的 参数 slivers, 可 以 传 入 一 组 小 部 件 。 代 码 如 下 : 


// Chapter15/15 - 06/1ib/pages/news_detail. dart 


body: CustomScrollView( // 自 定义 滚动 效果 
slivers: <Widget>[]， // 滚动 View 中 的 小 部 件 
), 


在 小 部 件数 组 中 ,首先 创建 一 个 SliverAppBar() 小 部 件 , SliverAppBar 中 的 参数 
expandedHeight 表示 可 以 显示 的 最 大 高 度 是 多 少 , 当 向 上 滑动 的 时 候 SliverAppBar 中 的 内 
容 可 以 自动 地 收缩 。SliverAppBar 的 参数 pinned 设 为 true, 表 示 SliverAppBar 保持 显示 在 
顶部 。SliverAppBar 中 的 参数 flexibleSpace 可 以 设置 成 标题 。 代 码 如 下 : 

// Chapter15/15 - 06/1ib/pages/news_detail. dart 


flexibleSpace: // 顶部 导航 标题 
FlexibleSpaceBar(title:Text(model. selectedNews. title) ,), 


然后 给 FlexibleSpaceBar 设置 一 下 背景 图 片 ,代码 如 下 : 


// Chapter15/15 - 06/1ib/pages/news_detail. dart 


background: Hero( // 导航 栏 背景 图 片 


tag: model. selectedNews. id, // Hero 标签 
child: FadeInImage( // 占 位 图 片 
placeholder: AssetImage( 'assets/news1. jpg'), // 图 片 资 源 
image: NetworkImage(model. selectedNews. image), // 网 络 加 载 图 片 
height: 300, // 动画 效果 高 度 
fit: BoxFit. cover, // 覆盖 显示 


), 
)， 


在 SliverAppBar 创建 SliverList 小 部 件 ,SliverList 会 在 SliverAppBar 下 面 显示 列表 。 
SliverList 需要 设置 参数 delegate: 代 码 如 下 : 
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// chapter15/15 - 06/1ib/pages/news_detail. dart 


SliverList( // Sliver 列表 


delegate: SliverChildListDelegate([ // 显示 的 小 部 件 
Container( // 资讯 详情 
padding: EdgeInsets.all(10), // 设置 边 距 
child: Text(model. selectedNews. description), // 详情 内 容 

), 

])， 


) 


这 样 我 们 就 实现 了 Sliver 的 效果 ,如 图 15.6 所 示 。 


详 由 处 交 交 村 全 磺 、 WW 


百年 来， 国 线 烛 名 与 自称， 部 用 


图 15.6 Sliver 效 果 


15.7 ” 自 定义 切换 页 面 动画 效果 


上 一 节 我 们 添加 了 Hero 动画 和 Sliver 特性 ,我 们 也 可 以 实现 切换 页 面 的 动画 效果 。 
在 widgets 目录 中 新 建 custom_route. dart 文件 ,然后 引入 material 包 ,创建 CustomRoute 


类 继承 MaterialPageRoute 类 ,然后 添加 泛 型 <T>, 表 示 可 以 加 载 任何 类 型 的 数据 。 代 码 
如 下 : 
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// Chapter15/15 - 07/1ib/widgets/custom route. dart 

class CustomRoute <T> extends MaterialPageRoute<T>{}// 自 定义 路 由 

在 类 CustomRoute 中 定义 一 个 构造 器 ,构造 器 中 传人 两 个 命名 的 参数 {WidgetBuilder 
builder,RouteSettings settings} ,我 们 不 需要 实现 导航 的 核心 功能 ,而 是 覆盖 导航 的 动画 效 
果 。 在 构造 器 中 添加 冒号 ,这 表示 要 添加 一 个 初始 化 内 容 。 代 码 如 下 : 


// Chapter15/15 - 07/1ib/widgets/custom route. dart 


CustomRoutel( {WidgetBuilder builder, RouteSettings settings}) 
: super(builder: builder, settings: settings); 
// 初始 化 MaterialPageRoute 


表示 CustomRoute 初始 化 完成 后 ,调用 父 类 的 构造 器 以 便 实 现 导航 的 核心 功能 。 我 们 
只 需要 覆盖 buildTransitions ( ) 方法 , buildTransitions ( ) 方 法 返回 值 是 一 个 小 部 件 ， 
buildTransitions() 方 法 中 还 包含 两 个 动画 的 参数 。 代 码 如 下 : 


// Chapter15/15 - 07/1ib/widgets/custom route. dart 


@override // 覆盖 导航 动画 效果 
Widget buildTransitions (BuildContext context, Animation < double > animation, Animation < 
double > secondaryAnimation, Widget child) { 
return super. buildTransitions(context, animation, secondaryAnimation, child); 


// 返回 小 部 件 


首先 判断 settings. isInitialRoute 的 值 ,如 果 此 时 值 为 true, 表 示 它 第 一 次 加 载 页 面 ,不 
是 导航 页 面 ,只 需要 把 child 返回 。 我 们 不 需要 在 第 一 次 加 载 时 添加 动画 效果 ,然后 在 返回 
语句 中 返回 动画 效果 ,代码 如 下 : 

// Chapter15/15 - 07/1ib/widgets/custom_route. dart 


return FadeTransition(opacity: animation, child: child, ); 


// 渐变 效果 的 导航 


child 表示 要 显示 的 小 部 件 。 在 main. dart 文件 中 引入 自 定 义 的 路 由 ,然后 在 从 导航 到 
显示 详情 页 这 里 使 用 ,代码 如 下 : 


// Chapter15/15 - 07/1ib/main. dart 
return CustomRoute < bool >(builder: (context) { // 使 用 自 定 义 导 航 


return !_isAuth?AuthPage( ) :NewsDetailPage( ); // 返回 资讯 详情 页 
DD); 
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这 样 导航 到 详情 页 的 效果 是 渐变 的 动画 效果 ,Flutter 能 给 任何 小 部 件 添加 动画 效果 ， 
例如 小 部 件 的 显示 和 隐藏 ,页面 的 切换 效果 等 。 

本 章 我 们 学 习 了 如 何 添加 动画 效果 ,以 及 用 动画 控制 器 控制 动画 的 运行 ,动画 控制 器 可 
以 配置 动画 的 持续 时 间 ,控制 动画 播放 和 回 滚 。 动 画 是 一 个 配置 的 对 象 ,定义 如 何 动画 , 例 
如 渐变 旋转、 快速 显示 等 。Flutter 中 的 任何 小 部 件 都 可 以 添加 动画 效果 ,动画 是 可 配置 
的 ,我 们 也 可 以 去 深入 学 习 每 一 个 动画 片段 ,或 可 以 使 用 Flutter 提供 的 动画 小 部 件 ,例如 
Hero、Sliver 等 ,Hero 可 以 从 一 个 页 面 平 滑 过 度 到 另 一 个 页 面 ,Sliver 可 以 给 滚动 内 容 添加 
动画 效果 。 我 们 还 学 习 了 自 定义 导航 动画 ,可 以 覆盖 默认 的 导航 动画 效果 ,使 用 自 定义 动画 
效果 覆盖 原 有 的 动画 效果 。 


优化 应 用 


我 们 实现 了 应 用 的 核心 功能 和 动画 效果 ,现在 看 一 下 还 有 哪些 方面 可 以 优化 应 用 ,本 章 
分 析 一 下 App。 


16.1 优化 自动 退出 


登录 App 后 ,在 资讯 列表 中 我 们 可 以 查看 资讯 的 详情 ,如 图 16. 1 所 示 。 


图 16.1 查看 资讯 详情 


这 里 有 个 问题 需要 解决 , 当 我 们 设置 的 登录 有 效 时 间 到 期 后 ,App 会 自动 退出 。 退 出 
时 ,我 们 选中 的 资讯 没有 被 清空 ,所 以 需要 在 mix_model. dart 文件 的 退出 方法 中 ,设置 选中 
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的 资讯 为 空 。 代 码 如 下 : 
// Chapter16/16 - 01/1ib/scoped models/mix_ model. dart 


void logout() async { 
SharedPreferencessharedPreferences 
= await SharedPreferences. getInstance( ); 
sharedPreferences. remove( 'token'); 
_user = null; 
_selectedNewsId = null; 
if (_authTimer != null) { 
_authTimer. cancel(); 
} 
_userSubject. add(false); 
} 


// 退出 方法 


// 获取 存储 对 象 
// 清除 token 
// 清除 登录 用 户 
// 重 置 选中 资讯 
// 计时 器 不 为 空 
// 注销 计时 器 


// 发 送 退 出 事件 


这 样 当 自动 退出 后 ,再 登录 进入 创建 资讯 页 面 时 ,就 不 会 有 问题 了 。 


16.2 优化 编辑 功能 和 收藏 功能 


在 我 的 资讯 页 面 中 ,编辑 某 条 资讯 时 ,如 图 16. 2 所 示 。 


图 16.2 编辑 资讯 页 面 
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在 编辑 资讯 页 面 中 ,由 于 屏幕 没有 足够 的 空间 ,标题 的 文本 框 滑 出 了 屏幕 , 当 我 们 提交 
表单 后 ,在 我 的 资讯 页 面 中 发 现 资 讯 的 标题 消失 了 ,如 图 16. 3 所 示 。 


图 16.3 资讯 标题 消失 了 


在 编辑 资讯 页 面 中 ,我 们 使 用 初始 化 值 的 方式 赋值 ,这 样 当 文本 框 滑 出 屏幕 时 ,提交 表 
单 将 无 法 获取 滑 出 屏幕 的 文本 框 中 的 值 。 我 们 可 以 使 用 文本 框 控制 器 来 解决 这 一 问题 ,我 
们 给 编辑 资讯 页 面 中 的 每 个 文本 框 添加 控制 器 ,并 把 文本 框 中 的 初始 化 参数 去 掉 , 代码 


如 下 : 


// Chapter16/16 - 02/1ib/pages/edit_news. dart 


TextEditingController titleController; 
TextEditingController descController; 
TextEditingController scoreController; 


@override 
void initState() { 
super. initState( ); 
_titleController = TextEditingController(); 
_descController = TextEditingController(); 
_scoreController = TextEditingController(); 
} 


// 标题 文本 控制 器 
// 描述 文本 控制 器 
// 分 数 文本 控制 器 


// 初始 化 方法 
// 父 类 初始 化 
// 初始 化 标题 控制 器 
// 初始 化 描述 控制 器 
// 初始 化 分 数控 制 器 
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然后 需要 设置 表单 中 文本 框 的 控制 器 ,代码 如 下 : 


// Chapter16/16 - 02/1ib/pages/edit news. dart 


if (model. selectedNews == null) { // 如 果 是 创建 模式 


_titleController. text = ''; // 文本 框 设 为 空 
} else { // 如 果 是 编辑 模式 
_titleController. text = model. selectedNews. title; 
// 设置 为 选中 标题 
} 
return TextFormField( // 标题 文本 框 
controller: _titleController, // 标题 文本 控制 器 


在 提交 表单 的 方法 中 ,需要 使 用 文本 控制 赋值 ,代码 如 下 : 


// Chapter16/16 - 02/1ib/pages/edit news. dart 


model.addNews( // 调用 新 增资 讯 方 法 

_titleController. text, // 标题 中 的 文本 

_descController. text, // 描述 中 的 文本 

double. parse(_scoreController. text), // 分 数 中 的 文本 
image) 


这 样 即使 编辑 资讯 页 面 中 的 文本 框 滑 出 页 面 了 ,也 可 以 保存 文本 框 中 的 值 。 
在 NewsCard 小 部 件 中 ,收藏 按钮 的 处 理 逻 辑 是 通过 索引 选中 资讯 的 。 代 码 如 下 所 示 : 


model. selectNews(model. newsList[ index]. id); // 通 过 索引 选中 资讯 


此 时 使 用 了 收藏 过 滤 功 能 ,如 图 16.4 所 示 。 

资讯 列表 中 的 索引 发 生 了 变化 ,过 滤 后 索引 本 应 是 1 的 资讯 ,但 索引 变 成 了 0, 当 我 们 
单 击 “ 详 情 ” 按 钮 时 会 被 导航 到 一 个 错误 页 面 ,所 以 我 们 不 应 该 依赖 资讯 的 索引 实现 收藏 导 
航 功 能 。 

资讯 列表 中 的 数据 是 不 变 的 ,但 是 索引 会 随 着 过 滤 条 件 的 变化 而 变化 ,所 以 我 们 把 索引 
都 替换 成 id。 代码 如 下 : 


// Chapter16/16 - 02/1ib/widgets/news/news_card. dart 


onPressed: () => Navigator. pushNamed < bool > 
(context, '/news/' + news. id) // 使 用 id 导航 页 面 


保存 并 重启 ,过滤 收藏 后 ,此 时 查看 详情 页 就 可 以 显示 正确 的 页 面 了 。 
但 新 建 的 资讯 标题 过 长 ,如 图 16. 5 所 示 。 
资讯 的 标题 过 长 需要 换行 ,我 们 可 以 设置 Text 小 部 件 的 参数 softWrap, 代 码 如 下 : 


// Chapter16/16 - 02/1ib/widgets/ui element/title defaut. dart 
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图 16.4 过 滤 收 藏 的 资讯 


child: Text( // 标题 文本 


title, // 标题 内 容 
softWrap: true, // 换行 


), 


默认 情况 下 Text 宽度 是 不 受 限 制 的 ,所 以 需要 把 Text 小 部 件 用 Flexible 包装 一 下 , 代 
码 如 下 : 


// Chapter16/16 - 02/1ib/widgets/ui_element/title defaut. dart 


Flexible( // 占据 行 的 一 定 宽度 


child: Container( // 设置 边 距 
margin: EdgeInsets. only(top: 10.0), // 外 边 距 
child: Text( // 文本 小 部 件 

title, // 文本 内 容 


softWrap: true, // 自动 换行 
), 
), 
); 
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16.5 资讯 标题 过 长 


设置 好 后 ,显示 正常 了 ,如 图 16.6 所 示 。 


图 16.6 资讯 标题 换行 
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16.3 使 用 analyze 命令 优化 项 目 


我 们 可 以 在 项 目 目 录 下 运行 flutter analyze, 这 个 命令 可 以 帮助 我 们 分 析 项 目 , 并 且 给 
出 修改 建议 和 行 号 ,如 图 16.7 所 示 。 


Unused import: ‘package:flutter/rendering.dart’ » Lib/main.dart:5:8 » unused_import 
Unused import: './models/news_model.dart' » lib/main.dart:9:8 。 unused_: 

Unused import: './news_list.dart' »« Lib/pages/auth.dart:3:8 » unused_: 

Unused import: '../models/news_model.dart' » lib/pages/edit_news.dart » unused_import 
Duplicate import » lib/pages/edit_news.dart » duplicate_import 

Unused import: *../models/news_model.dart' » lib/pages/edit_news.dart *» unused_import 
Unused import: '../models/news_model.dart' » lib/pages/my_news.dart:5:8 »* unused_import 


Unused import: '../models/news_model.dart' » lib/pages/news_list.dart:7:8 。 unused_import 
Unused import: ‘package:flutter_news/scoped_models/mix_model.dart' 。 
lib/scoped models/main scope model.dart:1:8 。« unused_import 


Unused impor Tn 。Lib/widgets/news/news.dar » unused_import 
Unused import: './score.dart' 。 lib/widgets/news/news.dart:4:8 。unused_import 


图 16.7 分 析 应 用 项 目 


可 以 看 到 项 目 很 多 地 方 引用 的 文件 没有 被 使 用 ,我 们 可 以 根据 提示 逐一 修改 。 

很 多 服务 会 提供 接口 的 key,key 最 好 放 在 统一 的 地 方 管理 ,例如 创建 一 个 可 以 全 局 访 
问 的 文件 。 在 lib 的 目录 下 创建 目录 global, 然 后 创建 global. dart 文件 。 在 global. dart 文 
件 中 可 以 定义 apikey, 代 码 如 下 : 

// Chapter16/16 - 03/global/global. dart 

final String apiKey = 'AIzaSyCLQOTG59usHzrIRrkQwmb8Pzu80Mqsa7ho'; // 接口 的 key 


这 意味 着 我 们 在 需要 用 到 的 地 方 引入 global. dart 文件 。 


使 用 平台 特有 的 小 部 件 


我 们 已 经 完成 了 应 用 的 所 有 功能 。 本 章 学 习 如 何 根据 不 同 的 平台 显示 不 同 的 小 部 件 ， 
以 及 根据 不 同 的 平台 使 用 不 同 的 主题 。 


17.1 根据 平台 的 不 同 显 示 不 同 的 小 部 件 


我 们 使 用 Material Design 构建 了 整个 应 用 ,包括 Android 和 iOS 两 个 平台 。Material 
Design 不 仅仅 是 为 Android 平台 设计 的 ,Material Design 是 一 个 设计 体系 ,我 们 可 以 在 任 
何 时 候 使 用 它 ,iOS 当然 也 可 以 使 用 它 , 然 而 有 时 我 们 需要 使 用 iOS 特有 的 小 部 件 ,Flutter 
允许 我 们 添加 iOS 原生 的 小 部 件 。 

在 官网 小 部 件 的 分 类 中 ,可 以 看 到 Cupertino 分 类 ,如 图 17. 1 所 示 。 


日 间 


Widget catalog 


图 17.1 官网 中 的 Cupertino 分 类 
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Cupertino 分 类 中 提供 了 很 多 iOS 原生 的 小 部 件 ,如 图 17. 2 所 示 。 


Cupertino (iOS-style) widgets 


Docs > Development > UI > Widgets > Cupertino 


Beautiful and high-fidelity widgets for current iOS design language 


See more widgets in the widget catalog 


CupertinoActionSheet CupertinoActivityIndicator CupertinoAlertDialog 
AnioS-style modal bottom action AniOS-style activity indicator An iOS-style alert dialog. 
sheet to choose an option among Displays a circular ‘spinner 

many. 

Documentation Documentation Documentation 


CupertinoDialog 
Button A genenic CupertinoDialog can 
hold whatever content you'd 


ike 


CupertinoButton CupertinoDatePicker CupertinoDialog 


17.2 ”Cupertino 小 部 件 


这 些 Cupertino 小 部 件 可 以 在 Flutter 中 使 用 。 在 编辑 资讯 页 面 中 ,提交 按钮 使 用 了 加 
载 条 。 代 码 如 下 : 


// Chapter17/17 - 01/1ib/pages/edit news. dart 


Widget _buildSubmitButton(MainScopeModel model) { // 构建 按钮 方法 


return ScopedModelDescendant < MainScopeModel >( 
builder: (BuildContext context, // 使 用 scope model 
Widget child，MainScopeModel model) { 
return model. isLoading // 判断 加 载 状态 
? Center(child: CircularProgressIndicator()) // 显示 加 载 条 
: RaisedButton( // 显示 提交 按钮 
color: Theme. of(context) .accentColor, // 按钮 背景 色 
textColor: Colors. white, // 按钮 文字 颜色 
child: Text(' 创 建 ')， // 按钮 上 的 文字 


onPressed: () { // 按钮 单 击 事件 
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_submitForm(model); // 提交 表单 


此 处 加 载 条 可 以 替换 成 iOS 中 的 加 载 条 ,我 们 可 以 使 用 CupertinoActivityIndicator 小 
部 件 。 在 iOS 设备 上 显示 iOS 的 加 载 条 ,这 意味 着 我 们 需要 获取 平台 的 信息 ,代码 如 下 : 


// Chapter17/17 - 01/1ib/pages/edit_news. dart 


if(model. isLoading) { // 如 果 是 加 载 状态 


return Theme. of (context). platform 
== TargetPlatform. i0S? // 判断 是 否 是 i0S 
Center(child:CupertinoActivityIndicator( ) ) : // 显示 ios 的 加 载 条 
Center(child: CircularProgressIndicator()) // 显示 material 加 载 条 
Jelse{ // 不 是 加 载 状态 
return RaisedButton( // 显示 按钮 


这 样 我 们 就 完成 了 区 分 平台 的 编码 。 保 存 后 ,创建 一 条 资讯 ,发 现 底 部 显示 的 是 iOS 
的 加 载 条 ,如 图 17. 3 所 示 。 


图 17.3 使 用 iOS 加 载 条 
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我 们 可 以 使 用 区 分 平台 的 方法 实现 很 多 功能 ,而 不 只 是 显示 不 同 的 小 部 件 。 
17.2 根据 不 同 的 平台 显示 不 同 的 主题 


当前 应 用 的 主题 在 不 同 的 设备 上 显示 的 效果 几乎 一 样 ,我 们 可 以 根据 不 同 的 平台 显示 
不 同 的 主题 。 在 main. dart 文件 中 ,我 们 使 用 了 主题 ,代码 如 下 : 


// Chapter17/17 - 02/1ib/main. dart 


theme: ThemeData( // 使 用 主题 


primaryColor: Colors. deepOrange, // 主题 颜色 
accentColor: Colors. deepOrange, // 交互 颜色 
brightness: Brightness. light, // 主题 模式 


), 


我 们 可 以 根据 不 同 的 平台 设置 不 同 的 主题 ,代码 如 下 : 


// Chapter17/17 - 02/1ib/main. dart 


theme: Theme. of(context).platform 


== TargetPlatform. i0S? // 判断 当前 设备 平台 
ThemeData( // 如 果 是 ios 设备 
primaryColor: Colors. deepPurple, // 使 用 deepPurple 
accentColor: Colors. deepPurpleAccent, // 强调 色 
brightness: Brightness. dark, // 深夜 模式 
总 
ThemeData( // android 设备 
primaryColor: Colors. deepOrange, // 使 用 deepOrange 
accentColor: Colors. deepOrange, // 强调 色 
brightness: Brightness. light., // 明亮 模式 


), 


保存 后 发 现在 不 同 的 平台 显示 的 主题 不 同 了 。Android 设备 上 的 主题 与 之 前 一 致 ,iOS 
设备 上 的 主题 显示 如 图 17.4 所 示 。 

本 章 我 们 学 习 了 如 何 根据 平台 的 不 同 执行 不 同 的 代码 ,我 们 通过 Theme. of(context). 
platform 找到 平台 信息 ,然后 判断 是 iOS 平台 还 是 Android 平台 ,再 运行 不 同 的 代码 。 在 官 
网 中 可 以 找到 很 多 iOS 风格 的 小 部 件 , 但 并 不 是 所 有 的 Material 小 部 件 都 有 对 应 的 iOS 小 
部 件 。 
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下 类， 你 知 天 多 少 ? 百年 六 ， 国 全 名 与 攻关 ， Oa 


图 17.4 iOS 设 备 上 的 主题 


Flutter 跨 平 台 交 互 


Flutter 允许 我 们 编写 和 使 用 平台 的 原生 代码 ,例如 我 们 可 以 使 用 Java 编写 Android 的 
代码 ,或 者 使 用 Object-C 编写 iOS 代码 。 如 果 需 要 编写 非常 高 级 的 应 用 ,就 有 可 能 使 用 原 
生 的 特性 。 例 如 我 们 想 实现 某 些 功能 ,但 是 没有 相应 的 第 三 方 包 。 例 如 第 14 章 我 们 使 用 相 
机 的 功能 是 通过 第 三 方 包 实现 的 ,这 个 第 三 方 包 中 使 用 的 是 原生 的 代码 ,然后 通过 Flutter 
包装 的 ,所 以 我 们 可 以 直接 使 用 这 个 第 三 方 包 中 的 功能 。 本 章 我 们 学 习 如 何 编写 第 三 方 包 
插件 。 


18.1 Flutter 与 原生 代码 交互 


官网 针对 编写 跨 平 台 代码 提供 了 图 解 ,如 图 18. 1 所 示 。 

图 18.1 中 显示 了 Flutter 是 如 何 跟 iOS 平台 和 Android 平台 交互 的 ,并 提 到 了 方法 管 
道 MethodChannel, 它 是 Flutter 和 原生 代码 之 间 的 桥梁 ,建立 好 桥梁 后 Flutter 可 以 给 原生 
代码 发 送 消息 ,原生 代码 可 以 监听 消息 并 返回 一 些 内 容 。 例 如 第 三 方 包 image_picker 中 使 
用 了 相机 功能 ,这 个 功能 只 需要 实现 监听 , 当 我 们 选择 使 用 相机 时 ,只 需要 发 送 相 应 的 事件 ， 
然后 包 中 的 原生 代码 会 监听 到 这 个 事件 ,这 样 就 打开 了 相机 的 功能 。 这 个 相机 功能 既 包 括 
iOS 原生 代码 也 包括 Android 的 原生 代码 ,所 以 以 上 就 是 第 三 方 包 image_picker 选择 相机 
时 实现 的 内 容 。 

我 们 可 以 使 用 这 个 原理 实现 查看 电池 状态 的 功能 。 在 main. dart 文件 中 添加 一 个 属性 
_platformchannel, 然后 创建 一 个 MethodChannel 对 象 , MethodChannel 是 由 flutter/ 
services 包 提供 的 ,所 以 需要 引入 一 下 。 代 码 如 下 : 


MethodChannel channel = MethodChannel(); // 创 建 方法 管道 

这 样 我 们 就 创建 了 一 个 交互 的 管道 ,这 个 管道 需要 一 个 唯一 标识 ,最 好 的 实现 方式 是 使 
hat nnn 例如 : x7data. com/battery, 这 样 能 保证 管道 的 唯一 性 。 下 一 步 需 要 
调用 原生 平台 的 管道 获取 内 容 。 代 码 如 下 : 


// Chapter18/18 - 01/lib/main. dart 
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Flutter app(client) 


FlutterMethodChannel 


MethodChannel 


iOS host 


AppDelegate 


FlutterViewController 


| | 


ios 3rd-Party 


Be Apls for iOS 


i 


Android host 
一 一 一 一 一 一 一 一 一 一 一 一 


Activity 


FlutterView 


-一 一 | 
MethodChannel | | 


Android 3rd-Party 
platform APls for 
APls Android 


18.1 编写 跨 平台 代码 图 解 


MethodChannel channel = MethodChannel( // 创建 方法 管道 
'x7data. com/battery', // 方法 管道 标识 

}; 

Future < Null > getBatteryLevel() async { // 创建 异步 方法 
String batteryLevel; // 电池 状态 
try{ // 异常 处 理 机 制 

final int result // 平台 返回 结果 
= await channel. invokeMethod( 'getBatteryLevel’'); // 调用 平台 方法 
batteryLevel = ' 电 池 状 态 $ result'; // 电池 状态 结果 
} catch (error) { // 出 现 异 常 时 
batteryLevel = ' 获 取 电 池 状 态 失败 '; // 电池 状态 异常 
} 
print(batteryLevel); // 打印 电池 状态 


| 
eo 
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} 

@override // 覆盖 

void initState() { // 初始 化 方法 
super. initState( ); // 父 类 初始 化 


getBatteryLevel(); // 获取 电池 状态 


我 们 创建 了 返回 值 为 Future < Null > 的 异步 方法 ,在 方法 体 中 使 用 了 方法 管道 
MethodChannel。 方 法 管道 可 以 调用 invokeMethod() 方 法 ,invokeMethod() 方 法 需要 传递 
字符 串 参 数 ,这 个 参数 是 我 们 在 原生 代码 中 编写 的 监听 方法 ,这 里 命名 为 getBatteryLevel。 
因为 invokeMethod() 方 法 是 异步 的 ,所 以 在 调用 方法 前 加 await 关键 字 ,然后 定义 final int 
result 接收 原生 平台 返回 的 结果 。 在 调用 过 程 中 可 能 出 现 异 常 ,所 以 我 们 使 用 了 try catch 
语句 。 如 果 invokeMethod() 方 法 执行 成 功 就 返回 ' 电 池 状 态 $result' ,失败 时 返回 ' 获 取 电 
池 状 态 失 败 ', 最 后 我 们 在 控制 台 打 印 返回 结果 。 以 上 就 是 Flutter 端 需要 编写 的 代码 。 现 
在 我 们 看 一 下 如 何 编写 原生 代码 。 


18.2 编写 Android 端 原生 代码 并 与 Flutter 交互 


在 应 用 目录 下 找到 MainActivity. kt 文件 .如 图 18. 2 所 示 。 


vv 世 android 


> 匾 .gradle 


vv app 
vv 吧 src 
> 上 debug 
> 画 main 
> BM java 
v 世 kotlin 
v 区 com 
YY 园 example 
YY chapter05 
区 MainActivity.kt 


图 18.2 MainActivity. kt 文件 


在 MainActivity. kt 文件 中 ,我 们 可 以 编写 Android 代码 。 在 MainActivity 类 中 ,首先 
创建 一 个 变量 private val CHANNEL 二 "x7data. com/battery" 表 示 管 道 名 称 , 管 道 的 值 需 
要 与 我 们 上 一 节 定 义 的 方法 管道 名 称 一 致 。 

在 onCreate 方法 中 创建 一 个 MethodChannel() 对 象 ,MethodChannel() 需 要 传人 一 个 
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getFlutterView() 方 法 ,再 传人 管道 CHANNEL, 然 后 调用 setMethodCallHandler() 方 法 来 
建立 管道 之 间 的 连接 ,最 后 我 们 需要 创建 一 个 监听 来 接收 消息 事件 ,可 以 通过 创建 
MethodCallHandler 对 象 实现 监听 。 代 码 如 下 : 


// chapter18/18 - 02/MainActivity. kt 


new MethodChannel (getFlutterView(), CHANNEL) // 创建 管道 

. setMethodCallHandler( // 建立 桥梁 
new MethodCallHandler() { // 添加 监听 

@Override 

public void onMethodCall(MethodCall call, Result result) { 

} // 监听 方法 


]) 


这 样 我 们 就 连接 了 管道 并 且 建 立 了 监听 ,但 是 我 们 还 没有 指定 监听 事件 。 首 先 在 
MainActivity 类 中 添加 一 个 私有 方法 ,返回 值 是 Int 类 型 ,方法 名 为 getBatteryLevel, 这 个 
方法 名 必须 与 上 一 节 Flutter 中 调用 的 方法 名 保持 一 致 ,方法 中 需要 返回 电池 的 状态 ,代码 
如 下 : 


// Chapter18/18 - 02/MainActivity. kt 


private fun getBatteryLevel(): Int { // 获取 电池 状态 方法 
valbatteryLevel: Int // 定义 电池 状态 变量 
if (VERSION. SDK_INT > = VERSION_CODES. LOLLIPOP) { // 判断 SDK 版 本 
valbatteryManager // 电池 管理 


= getSystemService(Context.BATTERY SERVICE) as BatteryManager 
batteryLevel = batteryManager.getIntProperty 


(BatteryManager. BATTERY_PROPERTY_CAPACITY) // 返回 电池 状态 
} else{ // 如 果 是 低 版 本 
val intent 


= ContextWrapper (applicationContext ). registerReceiver (null, IntentFilter (Intent. ACTION_ 
BATTERY CHANGED)) 


batteryLevel = // 低 版 本 电池 状态 
intent!! .getIntExtra(BatteryManager. EXTRA_LEVEL, —1) 
* 100 / intent. getIntExtra(BatteryManager. EXTRA_SCALE, —1) 
} 
return batteryLevel 
} 


这 样 方法 和 管道 就 都 创建 好 了 ,下 一 步 添加 事件 监听 ,在 setMethodCallHandler() 方 法 
中 首先 检查 call. method 是 否 等 于 getBatteryLevel, 如 果 等 于 就 返回 getBatteryLevel() 方 
法 的 返回 值 ,再 判断 batteryLevel; 如 果 batteryLevel 不 等 于 一 1 这 就 表明 请 求 成 功 ,调用 
reuslt. success() ,方法 中 传人 batteryLevel, 其 他 情况 返回 result. error() ,方法 中 传人 字符 
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Tn 


,获取 不 到 电池 状态 。 如 果 找 不 到 对 应 的 方法 ,就 调用 result. notImplemented() 方 法 表 
示 找 不 到 对 应 的 方法 。 代 码 如 下 : 


// Chapter18/18 - 02/MainActivity. kt 


MethodChannel (flutterView, CHANNEL). setMethodCallHandler { call, result 一 > 
// 创建 管道 和 监听 


if (call.method == "getBatteryLevel") { // 监听 方法 名 称 
valbatteryLevel = getBatteryLevel() // 调用 电池 状态 方法 
if (batteryLevel != —1){ // 调用 成 功 
result. success(batteryLevel) // 返回 电池 状态 

} else{ // 调用 失败 


result. error 
("UNAVAILABLE", "获取 不 到 电池 状态 ", nul1)  // 返回 失败 的 结果 
} 
} else { // 找 不 到 方法 名 
result. notImplemented( ) // 获取 不 到 方法 
} 
} 


保存 并 重启 后 ,我 们 成 功 地 获取 了 电池 的 状态 ,如 图 18. 3 所 示 。 


‘auncning 1D/main .aar A 
Built build/app/outputs/apk/debug/app-debug .apk. 
I/flutter ( 4138): auth 


D/VEGL_emulLation( 4138): egLMakeCurrent : 0x9e8b0200: ver 3 0 (tinfo 0xal1250780) 
I/flutter 〈 4138) : 电池 状态 100 


图 18.3 获取 电池 状态 


18.3 编写 iOS 端 原生 代码 与 Flutter 交互 


打开 ios 目录 下 的 AppDelegate. swift 文件 ,如 图 18.4 所 示 。 


Y 区 ios 
> 图 .symlinks 
> Mm Flutter 
> 图 Frameworks 
> 图 Pods 
YY 苹 Runner 
> BM Assets.xcassets 
>》 图 Base.Iproj 


AppDelegate.swift 


18.4 AppDelegate. swift 文件 所 在 目录 
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AppDelegate. swift 文件 是 使 用 swift 语言 编写 的 ,在 didFinishLaunchingWithOptions 
() 方 法 中 添加 一 些 控 制 器 ,代码 如 下 : 


// Chapter18/18 - 03/AppDelegate. swift 


let controller : FlutterViewController = // 创建 Flutter 视图 控制 器 
window?. rootViewController as! FlutterViewController 


然后 创建 方法 管道 ,代码 如 下 : 


// Chapter18/18 - 03/AppDelegate. swift 
let batteryChannel // 创建 方法 管道 


= FlutterMethodChannel (name: "x7data. com/battery", 
binaryMessenger: controller. binaryMessenger) 


下 一 步 在 AppDelegate 类 中 创建 一 个 方法 来 获取 iOS 中 电池 的 状态 ,代码 如 下 : 
// Chapter18/18 - 03/AppDelegate. swift 


private funcreceiveBatteryLevel(result: FlutterResult) { 


// 获取 电池 状态 方法 
let device = UIDevice. current // 获取 设备 
device. isBatteryMonitoringEnabled = true // 访问 电池 监控 
if device. batteryState == UIDevice.BatteryState. unknown { 
result(FlutterError(code: "UNAVAILABLE", // 获取 失败 


message: "获取 电池 状态 失败 "， 
details: nil)) 
} else{ 
result(Int(device. batteryLevel * 100)) // 获取 成 功 
} 
. 


最 后 在 方法 管道 中 监听 方法 名 称 , 代 码 如 下 : 


// Chapter18/18 - 03/AppDelegate. swift 


guard call. method == "getBatteryLevel" else { // 判断 方法 名 称 


result(FlutterMethodNotImplemented) // 没有 找到 方法 
return // 返回 空 
} 
Self?. receiveBatteryLevel(result: result) // 返回 电池 状态 


}) 


这 样 我 们 就 完成 了 iOS 端 代码 的 编写 .注意 获取 电池 状态 需要 在 真 机 上 测试 。 


发 布 Flutter 应 用 


到 目前 为 止 Flutter 应 用 已 开发 完成 ,我 们 可 以 在 现在 的 基础 上 继续 添加 更 多 的 功能 ， 
目前 的 Flutter 应 用 包含 了 所 有 的 核心 功能 ,可 以 发 布 这 个 应 用 了 ,本 章 介绍 如 何 发 布 
Flutter 应 用 ,包括 打包 应 用 及 发 布 到 Android 应 用 商店 和 Apple Store 上 ,本 章 还 会 介绍 如 
何 设置 应 用 的 图 标 和 闪 屏 。 


19.1 设置 应 用 图 标 


我 们 可 以 使 用 第 三 方 包 flutter_launcher_icons 为 我 们 的 应 用 设置 图 标 , 包 flutter _ 
launcher_icons 可 以 自动 生成 各 种 尺寸 的 小 图 标 ,包括 Android 和 iOS, 如 图 19. 1 所 示 。 


ed Flutter Web & Server 


flutter_launcher_icons 0.7.3 


Readme © 


® Flutter Community Mow 


Apackage which simplifies the task 


ccocao of updating your Flutter app's 


launcher icon Fully flexible, allowing 
you to choose what plattorm you 


Flutter Launcher Icons wieh to update the launcher con for 


and Il you want the oplion to keep 


A command-line tool which simplifies the task of updating your Flutter app's launcher icon, 
Fully flexible, allowing you to choose what platform you wish to update the launcher icon for 
and if you want, the option to keep your old launcher icon in case you want to revert back 
sometime in the future. 


Whats New 


国 Q Funer communiy 


Version 0.7.3 (3rd Sept 2019) BQ Franz siva 
国 Q Mark osulvan 


。 Lot of refactoring and improving code quality (thanks to @connectety) 


。 Added correct App Store icon settings (thanks to @richgoldmd) a@omall com 
sulivan@omall com 


Version 0.7.2 (25th May 2019) Qcommuniy@futter zone 


图 19.1 第 三 方 包 flutter_launcher_icons 
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在 android 目录 内 部 的 res 目录 中 包括 不 同 尺 寸 的 图 标 ,如 图 19. 2 所 示 。 


项 android 


用 mipmap. 
> values 


各 AndroidManifestxml 


图 19.2 android 中 的 应 用 图 标 


res 目录 下 各 种 尺寸 的 图 标 就 是 我 们 的 应 用 图 标 ,我 们 可 以 使 用 PhotoShop 等 工具 手 
动 设置 各 种 尺寸 的 图 标 。iOS 中 也 需要 设置 不 同 尺寸 的 图 标 , 第 三 方 包 flutter_launcher_ 
icon 可 以 很 容易 地 帮助 我 们 生成 这 些小 图 标 。 首 先 添加 包 flutter_launcher_icon 的 依赖 。 
我 们 并 不 需要 在 项 目 中 使 用 这 个 包 , 只 是 在 开发 完成 的 时 候 使 用 这 个 包 ,在 官网 上 可 以 找到 
这 个 包 的 使 用 方法 ,如 图 19. 3 所 示 。 


dev_dependencies: 


flutter_launcher_icons: 0.7.3” 


fLutter_icons: 
android: "launcher_i 
ios: 


image_path: "assets/icon/icon.png 


图 19.3 添加 flutter_launcher_icon 依赖 


在 dev_dependencies 中 配置 依赖 ,表示 是 在 开发 环境 时 用 的 。 我 们 把 Android 和 iOS 
都 设置 为 true, 然 后 设置 一 个 可 以 访问 的 图 片 。 代 码 如 下 : 


// Chapter19/19 - 01/pubspec. yaml 


flutter_icons: // Flutter 应 用 图 标 
android: true // 生成 Android 的 图 标 
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ios: true // 生成 ios 的 图 标 
image_path: "assets/news1. jpg" // 应 用 图 标 


我 们 还 可 以 设置 图 标的 背景 色 和 前 景色 等 。 具 体 可 以 参考 包 flutter_launcher_icon 的 
文档 ,然后 在 根 目 录 运 行 第 一 个 命令 flutter pub get, 再 运行 第 二 个 命令 flutter pub run 
flutter_launcher_icons:main, 如 图 19.4 所 示 。 


localhost:chapter05 michael$ flutter pub run flutter launcher_icons:main 
Android minSdkVersion = 16 
Creating default icons Android 


Overwriting the default Android launcher icon with a new icon 
Overwriting default i0S Launcher icon with new icon 
LocaLhost:chapter95 | 


图 19.4 自动 生成 图 标 
这 样 我 们 就 在 res 目录 下 自动 生成 了 应 用 的 图 标 , 如 图 19. 5 所 示 。 


> BN .vscode 

v 世 android 
访 .gradle 
加 app 


> 葬 debug 
v 医 main 
> java 
> 图 kotlin 
Yv 图 res 
> BM drawable 
YY mipmap-hdpi 
ic_launcher.png 
7 也 mipmap-mdpi 
ic_launcher.png 
区 mipmap-xhdpi 
ic_launcher.png 
天 mipmap-xxhdpi 


ic_launcher.png 


> 图 mipmap-xxxhdpi 


图 19.5 通过 包 flutter_launcher_icon 生成 的 图 标 
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此 时 我 们 可 以 看 到 不 同 尺寸 的 小 图 标 , 在 ios 目录 下 Runner 中 的 Assets 目录 下 也 生 
成 了 各 种 尺寸 的 图 标 ,如 图 19.6 所 示 。 


v 世 Runner 
v Assets.xcassets 
攻 Applcon.appiconset 
{.} Contents.json 
9 Icon-App-20x20@1x 
因 Icon-App-20x20@ 


Icon-App-20x20@3》 
Icon-App-29x29@1x.. 


Icon-App-29x29@2x 
Icon-App-29x29@3x.... 
Icon-App-40x40@1x.... 
Icon-App-40x4 
Icon-App-40x40@3x 
Icon-App-60x6! 
Icon-App-60x6! - 
Icon-App-76x76@1x... 

9 Icon-App-76x76@2xX... 

9 Icon-App-83.5x83.5 

骨 Icon-App-1024x1024.. 


图 19.6 包 flutter_launcher_icon 生成 的 iOS 图 标 


以 上 就 是 生成 应 用 图 标的 方法 ,在 模拟 器 上 也 能 看 到 生成 的 图 标 , 如 图 19.7 所 示 。 
下 节 设 置 应 用 的 闪 屏 。 


19.2 给 App 添加 闪 屏 


闪 屏 是 应 用 启动 时 显示 的 内 容 , 默 认 是 白色 屏幕 。 我 们 可 以 把 应 用 的 图 标 显 示 在 闪 屏 
上 。android 的 rest 目录 中 有 个 drawable 目录 ,drawable 目录 中 的 launch_background. 
xml 可 以 设置 。 添 加 一 行 @android:color/white, 如 图 19.8 所 示 。 

重启 应 用 后 就 能 看 到 我 们 配置 的 闪 屏 。 在 ios 目录 中 的 Runner 目录 下 有 个 Assets. 
xcassets 目录 ,在 Assets. xcassets 目录 中 有 个 目录 LaunchImage. imageset, 这 里 有 很 多 闪 
屏 的 图 片 , 如 图 19. 9 所 示 。 

我 们 把 各 种 尺寸 的 闪 屏 图 片 放 到 LaunchImage. imageset 目录 下 ,名 称 与 图 19. 9 中 图 
片 的 名 称 保持 一 致 就 可 以 实现 iOS 的 闪 屏 功能 了 。 以 上 就 是 设置 应 用 闪 屏 的 方法 。 
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图 19.7 应 用 的 图 标 


<?xml version="1.0" encoding="utf-8"?> 

<!-- Modify this file to customize your Launch splash screen --> 

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:drawable="@android:color/white" /> 


You can insert your own image assets here --> 


<!-- <item> 
<bitmap 
android:gravity="center" 
android:src="@mipmap/launch_image" /> 
</item> --> 
A 


图 19.8 配置 闪 屏 图 片 
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Y> 区 ios 

> 条 .symlinks 

> 条 Flutter 

> 条 Frameworks 
> 图 Pods 

> 也 Runner 


YY 芭 Assets.xcassets 
> BW Applcon.appiconset 
vv 苹 Launchlmage.imageset 
{.} Contents.json 
因 Launchlmage.png 
因 Launchimage@2x.png 
因 Launchlmage@3x.png 
©@ README.md 
图 19.9 iOS 中 的 闪 屏 


19.3 Android 打包 和 发 布 


首先 需要 修改 应 用 的 名 称 , 在 android 目录 下 找到 AndroidManifest. xml 文件 ， 


图 19. 10 所 示 。 


” 莉 android 

曙 .gradle 
红 app 
Bs src 

》 本 debug 

天 main 

ba 因 ENE:] 
> 图 kotlin 
》 项 res 


屠 ! AndroidManifest.xml 


图 19.10 AndroidManifest. xml 文件 所 在 目录 


文件 中 的 android: label 标签 是 应 用 的 名 称 , 把 android: label 修改 成 新 闻 咨 询 ， 


图 19. 11 所 示 。 
在 ios 目录 中 ,找到 info. plist 文件 ,如 图 19. 12 所 示 。 


如 


如 
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<manifest xmlns:android="http://schemas.android. com/apk/res/android" 
package="com.exampte.chapter95"> 


<! 一 io.fLutter.app.FLutterAppLication is an android.app.AppLication that 
calls FlutterMain.startInitialization(this); in its onCreate method. 
In most cases you can leave this as-is, but you if you want to provide 
additional functionality it is fine to subclass or reimplement 
FlutterApplication and put your custom class here 
<application 
io.flutter.app.FlutterApplication" 
7 
@mipmap/ic_launcher"> 
<activity 
android:name=" .MainActivity" 
android:launchMode="singleTop" 
android:theme="@style/LaunchTheme”" 
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|tLocal 
android:hardwareAccelerate 
android:windowSoftInputMode="adjustResize"> 
This keeps the window background of the BBNY showing 
until FLutter renders its first frame. It can be removed if 
there is no splash screen (such as the default splash screen 
defined in estyLe/LaunchTheme) . 
eta-data 
androi 


"android. intent .action .MAIN' 
<category android:name="android ,intent.category.LAUNCHER， 
intent-fitter> 
</activit! 
</application> 
</manifest> 


图 19. 11 


置 Android 应 用 名 称 


攻 ios 
> .symlinks 
Mm Flutter 
Mm Frameworks 
MM Pods 
v 鹿 Runner 
图 Assets.xcassets 
Mn Base.lproj 
AppDelegate.swift 
GeneratedPluginRegistrant.h 
GeneratedPluginRegistrant.m 
图 Info.plist 
Runner-Bridging-Header.h 
> BM Runner.xcodeproj 
WM Runnerxcworkspace 
Podfile 
@ Podfilelock 


{.} ServiceDefinitionsjson 


图 19. 12 info. plist 所 在 的 目录 


288 者 | Flutter 实 战 指南 


在 文件 中 ,修改 CFBundleName 的 值 ,如 图 19. 13 所 示 。 


<key>CFBundleDevelopmentRegion</key> 
<string>$(DEVELOPMENT_LANGUAGE)</string> 
<key>CFBundleExecutable</key> 
<string>$(EXECUTABLE_NAME)</string> 
<key>CFBundLeIdentifier</key> 
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string> 
<key>CFBundleInfoDictionaryVersion</key> 


<string>6.0</string> 
<key>CFBundleName</key> 

<string> 新 闻 资 讯 </string> 
<key>CFBundlePackageType</key> 
<string>APPL</string> 
<key>CFBundleShortVersionString</key> 
<string>$ (FLUTTER_BUILD_NAME)</string> 


图 19.13 设置 iOS 应 用 的 名 称 
在 android 目录 中 的 app 目录 下 设置 build. gradle 文件 的 配置 。 在 配置 中 需要 保证 
applicationId 唯一 。 代 码 如 下 : 
applicationId "com. x7data. news" // 应 用 的 id 
在 AndroidManifest. xml 中 , 包 名 要 与 应 用 的 id 保持 一 致 ,如 图 19. 14 所 示 。 


schemas .android.com/apk/res/android" 


图 19.14 应 用 的 包 名 


在 build. gradle 文 件 中 还 可 以 设置 编码 的 版 本 、 应 用 的 版 本 和 SDK 的 版 本 ,这 个 
minSdkVersion 表示 安 卓 支持 的 最 低 版 本 ,targetSdkVersion 表示 构建 的 版 本 ,这 些 版 本 的 
值 可 以 使 用 默认 值 。 下 一 步 需 要 生成 签名 ,在 终端 运行 命令 : 

keytool - genkey —v - keystore ~ /key. jks — keyalg RSA - keysize 2048 — validity 10000 — 

alias key 

根据 终端 的 提示 输入 密码 、 姓 名、 组 织 机 构 后 在 一 目录 中 就 生成 了 key. jks 文件 ,然后 
创建 一 个 key. properties 文件 放 在 项 目 目 录 /android/key. properties。 在 key. properties 中 
添加 如 下 内 容 : 

storePassword= 签名 的 密码 

keyPassword= 签名 的 密码 


keyAlias = key 
storeFile= 签名 保存 的 路 径 
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在 项 目 目 录 /android/app/build. gradle 文件 中 ,添加 如 下 内 容 : 


def keystoreProperties = new Properties() // 读 取 属性 对 象 
def keystorePropertiesFile 
= rootProject. file('key. properties') // 读 取 属性 文件 
if (keystorePropertiesFile. exists()) { 
keystoreProperties. load(new FileInputStream(keystorePropertiesFile)) // 加 载 属性 文件 


} 
android { 


下 一 步 添加 签名 的 内 容 , 如 下 所 示 : 
signingConfigs { // 添加 签名 内 容 


release { 
keyAliaskeystoreProperties[ 'keyAlias'] 
keyPasswordkeystoreProperties[ 'keyPassword'] 
storeFile file(keystoreProperties[ 'storeFile']) 
storePasswordkeystoreProperties[ 'storePassword'] 
， 
. 
buildTypes { 


最 后 在 项 目 目录 运行 flutter build apk, 运 行 完成 后 ,在 build/app/output/release 目录 
中 可 以 看 到 构建 好 的 发 布 版 本 的 应 用 ,然后 可 以 把 这 个 应 用 包 发 布 到 商店 中 ,例如 腾讯 的 应 
用 宝 或 华为 应 用 商店 等 。 


19.4 ”iOS 打包 和 发 布 


发 布 iOS 的 应 用 需要 使 用 苹果 开发 者 账号 ,登录 开发 者 账号 后 可 以 创建 一 个 AppId, 如 
图 19. 15 所 示 。 


三 Developer 


Certificates, Identifiers & Profiles 


ldentifiers © Q Appm 


图 19.15 创建 Appld 
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创建 好 AppId 后 打开 App Store Connect, 如 图 19. 16 所 示 。 


App Store Connect 


新 闻 
App Store 协 情 届时 生殖 
Ri FR Mop store < # me MpSioe TNS 


人 的 航 


19.16 App Store Connect 


单 击 我 的 App 添加 一 个 新 的 App, 如 图 19. 17 所 示 。 


新 建 App 


平台 


主要 语言 


套装 ID 


SKU 


用 户 访问 权限 


图 19.17 新 建 App 
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填 好 相关 信息 后 ,六 
的 项 目 ,如 图 19. 18 所 示 。 


击 “ 创 建 ”按钮 就 创建 好 了 一 个 App。 下 一 步 通 过 Xcode 打开 我 们 


图 19.18 Xcode 打开 项 目 


我 们 需要 修改 Bundleldentifier, 它 的 值 是 我 们 使 用 苹果 开发 者 账号 注册 的 应 用 id， 


DisplayName 修改 为 新 闻 资 讯 , 然 后 设置 开发 团队 ,如 图 19. 19 所 示 。 


贸 


《和 》 号 


Resource Tags info Buad Settings Build phases LT 


PROJECT + Capabity MW Debug neleese Profie 


BD Runner 
TARGETS rd 


四 une TD Astomaticaly manage signing 


Team 大 潭 站 


Bundle Identifier com_example .chapter05 


Provisioning Proflle Xcode Managed Profile O 


Signing Certificate iPhone Developer: Nan Li (93ZW94T7JX) 


图 19.19 设置 开发 团队 


最 后 单 击 “Product” 下 的 “achive” 按 钮 .验证 一 下 ,如 果 没 有 问题 就 可 以 和 


在 App Store Connect 中 就 可 以 发 布 应 用 了 。 


击 上 传 ,最 后 


我 们 学 习 了 很 多 关于 Flutter 的 内 容 和 核心 的 特性 ,我 们 成 为 Flutter 开发 者 后 ,应 该 不 
断 实 践 以 便 成 为 更 好 的 Flutter 开发 者 。 

我 们 学 习 了 Flutter 核心 开发 技术 搭建 Flutter 开发 环境 、Flutter 小 部 件 的 概念 、 基 于 
堆栈 的 导航 、 验 证 用 户 输 入 、Flutter 与 HTTP、Flutter 中 的 权限 认证 ,使 用 相机 功能 、 使 用 
Flutter 的 动画 效果 、 跨 平台 开发 和 发 布 应 用 。 

通过 学 习 本 书 现在 我 们 可 以 成 为 Flutter 开发 者 了 ,使 用 一 种 代码 编写 运行 于 两 个 平台 
的 App, 整 本 书 我 们 学 习 了 很 多 关于 Flutter 的 内 容 和 核心 的 特性 ,希望 我 们 通过 本 书 的 学 
习 , 对 开发 移动 App 项 目 充满 自信 ,强烈 推荐 大 家 深入 官方 文档 去 了 解 更 多 内 容 , 更 重要 的 
是 使 用 学 到 的 知识 进行 更 多 的 编码 实践 ,不 断 地 挑战 自己 ,解决 问题 ,这 样 我 们 会 成 为 更 优 
秀 的 开发 者 。Flutter 还 在 不 断 地 发 展 ,希望 大 家 不 断 提升 自己 并 灵活 运用 Flutter, 为 了 提 
高 学 习 效率 ,作者 提供 整套 学 习 视 频 , 了 解 详情 请 浏览 网 站 http://www. x7data. com。 


